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

时间:2019-05-24 10:04:22

标签: angular angular-reactive-forms

在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次。

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

我想您正在模板中显示带有* 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