Setting a FormArray to an array of FormGroups

Question

How can I set a FormArray of a FormGroup? I want to set definitionProperties (FormArray) of my form.

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

The FormArray of FormGroups:

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

I found some code to add one by one but I'd like to set with an array rather than one value using push if it's possible:

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

The getFormGroups() function builds an array of groups:

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

The setting of the FormArray is in an observable:

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

can't use in the declaration, getFormGroups() is used after another control is used — doe
– doe, Commented Oct 20, 2019 at 0:22
Can you explain it a bit more? I didn't get what you're trying to do. — developer033
– developer033, Commented Oct 20, 2019 at 20:02
@developer033 I need to do something like this processorForm.get('definitionProperties').set(newValue); I also need to make sure the valueChanges() event isn't triggered when setting the new value. — doe
– doe, Commented Oct 21, 2019 at 3:55
@doe, an array of FormGroups are not the same that a FormArray of FormGroups. Your function createPropertyFormGroup return a FormGroup. I must supouse you has an array of objects [{name:'...',..},{name:'...',..}...] you can map the array: definitionProperties: this.fb.array(this.mydata.map(x=>this.createPropertyFormGroup(x)), but really I'm not very sure about your question — Eliseo
– Eliseo, Commented Oct 21, 2019 at 6:54

Mustafa Kunwa · Accepted Answer · 2019-10-21 04:23:27Z

1

Try this for initial Setup

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
         })
   })])
});

Use this for Adding more:

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

For more info read this: https://medium.com/@m.kunwa52/reactive-form-in-angular-with-formarray-2595e5ee1d31

answered Oct 21, 2019 at 4:23

Mustafa Kunwa

8651 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting a FormArray to an array of FormGroups

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related