将 FormArray 设置为 FormGroups 数组答案

【问题标题】：Setting a FormArray to an array of FormGroups将 FormArray 设置为 FormGroups 数组
【发布时间】：2019-10-19 23:16:04
【问题描述】：

如何设置 FormGroup 的 FormArray？我想设置我的表单的definitionProperties (FormArray)。

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

FormGroups 的 FormArray：

let propertyControls: FormGroup[] = [];
propertyControls = getFormGroups(); // set definitionProperties to this

我找到了一些代码来一一添加，但如果可能的话，我想使用一个数组而不是一个值来设置：

(this.gridProcessorForm.get('definitionProperties') as FormArray).push(group)

getFormGroups() 函数构建一组组：

createPropertyFormGroup(definitionProperty: ObjectDefinitionProperty) {
   let formGroup = this.fb.group({
      propertyName: definitionProperty.name,
      propertyType: definitionProperty.type.name,
      gridOffset: 1
   });
   return formGroup;
}

FormArray 的设置在一个 observable 中：

this.gridProcessorForm.valueChanges.subscribe(...)

【问题讨论】：

不能在声明中使用，getFormGroups()在使用另一个控件后使用
你能再解释一下吗？我没有明白你想要做什么。
@developer033 我需要做类似这样的事情 processorForm.get('definitionProperties').set(newValue);我还需要确保在设置新值时不会触发 valueChanges() 事件。
@doe，FormGroups 数组与 FormGroups 的 FormArray 不同。您的函数 createPropertyFormGroup 返回一个 FormGroup。我必须假设你有一个对象数组[{name:'...',..},{name:'...',..}...]，你可以映射数组：definitionProperties: this.fb.array(this.mydata.map(x=>this.createPropertyFormGroup(x))，但我真的不太确定你的问题

标签： angular

【解决方案1】：

试试这个进行初始设置

this.processorForm = this.fb.group({
    propertiesSide: new FormControl(),
    objectNamesSide: new FormControl(),
    definitionProperties: this.fb.array([
         this.fb.group({
             propertyName: definitionProperty.name,
             propertyType: definitionProperty.type.name,
             gridOffset: 1
         })
   })])
});

用这个来添加更多：

 var _definitionProperties= <FormArray>this.processorForm .controls.definitionProperties;
_definitionProperties.push({
       this.fb.group({
             propertyName: 'Name',
             propertyType: 'Type',
             gridOffset: 1
         })
 })

有关更多信息，请阅读以下内容： https://medium.com/@m.kunwa52/reactive-form-in-angular-with-formarray-2595e5ee1d31

【讨论】：