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

Question

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

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

任何帮助将不胜感激

Answer 1

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

所以我分叉了你的堆栈闪电战，我创建了一个带有闭包的有状态验证器，它做到了：

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);
}
};
}

分叉堆叠闪电战

希望这有帮助！

Answer 2

是的，只需更改

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

自

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

当您将延迟设为 1000ms 时，您还会禁用并阻止其他实例(或值(的状态的可访问性，但是，当您将延迟设为 0 时，它不会处理其他实例，只是检查当前实例。

希望对您有所帮助！