Angular 2自定义同步验证属性的值更改

时间:2017-09-08 13:22:34

标签: angular validation

我有一个角度2反应形式,几乎没有验证。一个字段必须在属性更改时进行验证 我的表格如下。

this.myForm = this.fb.group({
      firstName: [null, [Validators.required, Validators.minLength(4), Validators.maxLength(24), forbiddenNameValidator(/bob/i)]],
      phoneNumber: [null, [this.phoneNumberValidator.bind(this)]],
      email: [null, [Validators.required, Validators.email]]

    });

自定义验证方法如下

phoneNumberValidator(control: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (!this.isPhoneNumberValid) {
          resolve({
            'phoneNumber': true
          })
        } else {
          resolve(null);
        }
      }, 1000);
    })
  }
}

this.isPhoneNumberValid 根据电话号码的值变化而变化

但表单未按预期验证。 this.myForm.get('phoneNumber').errors.phoneNumber没有任何价值。

我的HTML如下

<input type="text" formControlName="phoneNumber">

  <div *ngIf="myForm.get('phoneNumber').errors && myForm.get('phoneNumber').errors.phoneNumber">
    Invalid Phone number
  </div>

0 个答案:

没有答案