Angular中FormArray的自定义验证器运行太多次

Question

在Angular 6中，我使用FormBuilder创建了这样的表单：

formData = this.formBuilder.group({
  name: new FormControl('', Validators.required),
  description: new FormControl(''),
  listSubItem: this.formBuilder.array([], ValidationService.noDuplicateSubItemName),
});

在表单中，约有100个listSubItem项。 但是，如果屏幕上有任何更改，则函数ValidationService.noDuplicateSubItemName将被调用100次。

如果屏幕有任何变化，总有一次只能调用它一次。

Answer 1

这取决于您的noDuplicateSubItemName验证器的工作方式，但是您可以在“表单”上添加“全局验证器”

formData = this.formBuilder.group({
  name: new FormControl('', Validators.required),
  description: new FormControl(''),
  listSubItem: this.formBuilder.array([]),
}, { validator :  ValidationService.noDuplicateSubItemName});

Answer 2

不看模板就很难回答，但我会尽力的。

我想您正在模板中显示带有* ngFor指令的数组，这意味着每次更新数组时，都会再次呈现由* ngFor管理的整个DOM，并对每个修改的对象进行检查（因此一切）。

您可以通过在* ngFor中添加“ trackBy”来管理模板，以管理其显示的数据数组。

<div *ngFor="let arrayElement of arrayElements; trackBy: trackElementByFn"> test <div>

并且在component.ts中，您必须添加：

trackElementByFn(index: number, item: string): number {
    return index;
}

现在，当您更改集合时，Angular可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。

有关更多信息，请在trackBy上查看此article。