Angular 6自定义验证器如何禁止用户在数字输入中添加特殊字符（如+或-）

Question

我制作了一个有角度的6个自定义验证器，以检查用户是否输入了3个必需的数字。 这是我的输入：

<mat-form-field appearance="outline" color="warn">
     <mat-label>Last 3 digits</mat-label>
     <input matInput type="text" formControlName="last_three_digits" placeholder="Last 3 digits">
</mat-form-field>&nbsp;

这是我以反应形式声明的方式：

  'last_three_digits': new FormControl('', [Validators.required, validatePositiveNotNull, validateLengthThree])

我试图添加Validators.pattern("[0-9 ]*")但它一直让用户添加-或+或=或/ 。

我只需要严格限制长度= 3。

这是脚本：

export function validateLengthThree(control: AbstractControl)
{
  if(control.value==null || control.value==undefined)
  {
    return { validPositive: true}
  }
  else if(control.value.length<3 && control.value!=null && control.value!=undefined)
  {
    return { validPositive: true}
  }
  else if(control.value.length>3)
  {
    return { validPositive: true}
  }
  return null;
}

我试图将输入类型更改为number但仍然相同。

我从堆栈中的这个答案中使用了/^\\d+$/这个模式，并且输入仍然接受特殊字符并验证了表单。

PS：我在自定义验证器中添加了null和undefined条件，因为当我从此输入中移出注意力时，当它为空时，它将引发错误，表明不能在null值上运行。

Answer 1

在您的输入上使用指令，以防止按键被按下

107 =“ +”

109 =“-”

111 =“ /”

187 =“ =”

<input keysban="[107,109,111,187]" type="text">

指令

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[editable]'
})
export class EditableDirective {
  @Input() keysban: number[];

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    // check banned key
    if (this.keysban) {
      if (this.keysban.indexOf(event.keyCode) > -1) {
        event.preventDefault();
      }
    }
    console.log(event.keyCode);
  }

  constructor() { }

}

不要忘记添加您的最大长度验证器