Angular 添加新元素时更新现有 FormArray 元素的有效性

Question

我不想要这个。因为我正在异步验证 FormArray 的每个元素，所以我希望验证器只在必要时运行（即当它们添加到的控件的值真正发生变化时）。我还发现这种行为很奇怪，因为验证器不会在 FormArray 的值发生变化时执行，只有在添加新元素时才会执行。

复制：https://stackblitz.com/edit/angular-reactive-forms-tkdu1n?file=app%2Fapp.component.ts

如有任何帮助，我们将不胜感激

Answer 1

是的，只需更改

return Observable.of(null).delay(1000);

至

return Observable.of(null).delay(0);

当您延迟 1000 毫秒时，您还会禁用并阻止其他实例（或值）状态的可达性，但是，当您延迟 0 时，它不会处理其他实例，只会检查当前实例。

希望对您有所帮助！

Answer 2

当一个新的 FormControl 被推入其中时，FormArray 似乎为每个嵌套的 FormControl 执行验证器，对此无能为力...

所以我分叉了你的 stackblitz 并创建了一个带闭包的有状态验证器，它成功了：

form: FormArray;

ngOnInit() {
  this.form = new FormArray([]);
  this.form.push(new FormControl("test", null, this.validatorFactory()));
}

addControl() {
  this.form.push(new FormControl(null, null, this.validatorFactory()));
}

validatorFactory() {
  let previousValue;
  return (c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    if (c.value == previousValue) {
      return Observable.of(null);
    } else {
      previousValue = c.value;
      return Observable.of(null).delay(1000);
    }
  };
}

Forked Stackblitz

希望对您有所帮助！

Angular 添加新元素时更新现有 FormArray 元素的有效性

Angular updates validity of existing FormArray elements when new element is added

angular

typescript

angular2-forms

angular-reactive-forms

angular-forms