angular - 将 FormArray 设置为 FormGroups 数组

Question

如何设置 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 的设置在一个可观察对象中:

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

Answer 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