角度异步验证器的状态未反映在表单字段的错误状态中

时间:2018-05-18 21:29:22

标签: angular angular-reactive-forms

我在zip字段上有一个异步验证器:

zip: ['', {
            validators: [
              Validators.required,
              Validators.minLength(5),
              Validators.maxLength(5)
            ],
            asyncValidators: [
              adPostFormValidators.isValidZip(this.locationService)
            ]
          },
      ],

但是,在我单击字段之前,该字段似乎没有反映异步验证器发出的错误。例如,这是在我点击之前(null是字段的错误状态):

enter image description here

我知道异步验证器已经运行,因为我将其结果输出到控制台:

enter image description here

然后,当我点击或失去焦点时,错误状态现在是准确的:

enter image description here

然而,验证器没有再次运行,因为没有新的东西登录到控制台。

1 个答案:

答案 0 :(得分:2)

所以看来,因为我使用的是ChangeDetectionStrategy.OnPush,所以我不得不手动标记异步验证器以进行检查:

ref.markForCheck()
return { 'Is not a valid zip': { value: control.value } } as ValidationErrors

其中ref的类型为ChangeDetectorRef