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

时间:2018-11-02 09:31:38

标签: angular angular6 customvalidator

我制作了一个有角度的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,但仍然相同。

我在堆栈上使用了answer中的这种模式/^\d+$/,并且输入仍然接受特殊字符并验证了表单。

P.S。我在自定义验证器中添加了nullundefined条件,因为当我从此输入集中出来时,当它为空时,它抛出一个错误,表明它不能在空值上运行。 / p>

1 个答案:

答案 0 :(得分: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() { }

}

别忘了添加您的最大长度验证器