触发 Angular 异步 FormGroup 验证

Eri*_*and 5 angular angular-reactive-forms

背景

仅当该组及其所有子项的所有同步验证均有效时,才会执行 FormGroup 上的异步验证。

问题

我想在所有子项都有效之前在 FormGroup 上执行 asyncValidator。

this.myForm = new FormGroup({
  country: [ null, [ Validators.required ] ],
  postalCode: [ null ],
  unrelatedField1: [ null ],
  unrelatedField2: [ Validators.min(123) ]
}, {
  validators: [ postalCodeFormat ],
  asyncValidators: [ postalCodeExists ]
})
Run Code Online (Sandbox Code Playgroud)

我的自定义 postalCodeExists 验证器需要国家/地区和邮政编码字段。它不关心“unrelatedField2”的有效性。

有什么方法可以手动触发 FormGroup 的异步验证吗?

我的第一个想法

据我所知这是不可能的。

this.myForm.valueChanges.pipe(
  map(...etc),
  distinctUntilChanges(...etc)
).subscribe(() => {
  if (this.myForm.get('country').valid && this.myForm.get('postalCode').valid) {
    this.myForm.executeAsyncValidationPlease();
  }
});
Run Code Online (Sandbox Code Playgroud)

我的第二个想法

this.myForm = new FormGroup({
  countryAndPostalCodeGroup: new FormGroup({
    country: [ null, [ Validators.required ] ],
    postalCode: [ null ],
  }, {
    validators: [ postalCodeFormat ],
    asyncValidators: [ postalCodeExists ]
  }),

  unrelatedField1: [ null ],
  unrelatedField2: [ Validators.min(123) ]
})
Run Code Online (Sandbox Code Playgroud)

它会起作用的。但我不喜欢它。我非常喜欢 myForm、所有 API 和数据存储都采用一种数据结构。做this.myForm.setValue(dataFromApi)或相反的.getValue()变体确实很有帮助。