angular - 如何在不触发表单更改事件的情况下将 FormGroup 添加到 FormArray

Question

我用 definitionProperties 中的任何空数组初始化一个表单我该如何更新 FormGroup ?我需要这样做而不触发更改事件，否则会导致 valueChanges 中的无限循环可观察的。

this.gridProcessorForm = this.fb.group({
    propertiesSide: new FormControl(),
    objectNamesSide: new FormControl(),
    definitionProperties: this.fb.array([])
});

这会导致无限循环:

this.gridProcessorForm.valueChanges.subscribe(val => {
    let propertyGroups: FormGroup[] = [];
    for (let property of this.objectDefinition.properties) {
      let group = this.createPropertyFormGroup(property);
      (this.gridProcessorForm.get('definitionProperties') as FormArray).push(group); // triggers change event so infinite loop
    }
});

当 setValue 与 { emitEvent: false } 一起使用时覆盖 FormArray 会出错。

this.gridProcessorForm.valueChanges.subscribe(val => {
  if (this.gridSideSelection = 'top') {        
    let propertyGroups: FormGroup[] = [];
    for (let property of this.objectDefinition.properties) {
      let group = this.createPropertyFormGroup(property);
      propertyGroups.push(group);
    }

    (this.gridProcessorForm.get('definitionProperties') as FormArray).setValue(propertyGroups, { emitEvent: false });
  }
});

我收到此错误:

There are no form controls registered with this array yet. 

似乎需要表单构建器使用 FormArray 中的组进行初始化？但我想用所有内容初始化表单。

Answer 1

angular 的 repo 中存在问题。请引用此评论 https://github.com/angular/angular/issues/23336#issuecomment-543209703
基本上，你需要这样做:

const addedControl = new FormControl();
this.controlArray.controls.push(addedControl);
this.controlArray['_registerControl'](addedControl);

更新 05.2021
这已在 Angular v12 https://github.com/angular/angular/issues/20439#issuecomment-779988084 中得到修复