Question

我研究了很多以找到解决方案，但没有一个stakoverflow问题有一个公认的答案。所以我做了我的研究，无法找到答案。

我希望自定义验证器能够只将数字作为输入而只需要三位数字，如838,892,183,234 ..等等

它也接受角色。

  threeNumbers(control: FormControl) {
    if (control.value && !/[0-9\+\-\ ]/.test(control.value) && control.value.length < 3) {
      return { 'greater than 3 numbers': true };
    }
    return null;
  }

}

this.courseForm = this.fb.group({
  username: [null, [Validators.required, this.threeNumbers, Validators.maxLength(3)]],
  email: [null, [Validators.required, Validators.pattern('([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\\.([a-zA-Z]{2,5})')]],
  address: [null, [Validators.required, Validators.minLength(10), Validators.maxLength(100)]],
  select: [null, [Validators.required]]
});

// html模板

  <form class="form-horizontal" (ngSubmit)='onSubmit()' [formGroup]='courseForm'>
    <div class="form-group">
      <label for="inputUsername" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputUsername" placeholder="Username" formControlName="username" name="name"
          [ngClass]="{inValid: !courseForm.get('username').valid && courseForm.get('username').touched, valid: courseForm.get('username').valid && courseForm.get('username').touched}">
        <span class="help-block" *ngIf="!courseForm.get('username').valid && courseForm.get('username').touched">Please enter a valid username</span>
      </div>
    </div>

Answer 1

调用以下功能开启（模糊） -

validator(val){
if(val.length === 3){
    return true;
}else{
    return false;
}

} make input type =“number”，它将停止使用字母表。

仅使用自定义验证器角度2将输入字段限制为数字

1 个答案: