Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular 7/8/9
Solution 1
FormGroup
addControl method accepts AbstractControl
as parameter which can be either a FormControl
or a FormArray
or another FormGroup
as they all extend AbstractControl
.
class FormGroup extends AbstractControl {}
class FormControl extends AbstractControl {}
class FormArray extends AbstractControl {}
FormBuilder can help you building such controls with array()
and group()
methods:
this.myForm = this.fb.group({
id: this.fb.control([this.book.id]),
authors: this.fb.array(['George Michael', 'Aretha Franklin']),
metaData: this.fb.group({ description : 'Great Book', publication: 2019})
});
You still can use the factory afterwards to build the controls you need (no matter what kind of control it is):
this.myForm.addControl('authors',
this.fb.array(['George Michael', 'Aretha Franklin']))
this.myForm.addControl('metaData',
this.fb.group({description: 'Great Book', publication: 2019}))
Solution 2
You can simply pass the FormArray
instead of a FormControl
.
this.form.addControl('arr',this.fb.array([]));
Edit: To use existing value
To use the value from the authors
array, use this:
authors.forEach(author => {
(<FormArray>this.form.controls.arr).push(new FormControl(author));
});
OR
this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']))
Lonely
Love doesn't make the world go round. Love is what makes the ride worthwhile. F.P. Jones
Updated on July 09, 2022Comments
-
Lonely almost 2 years
In the other examples at StackOverflow there are many questions about using FormGroups in FormArrays. But my question is the opposite.
FormArrays have a push method, that makes many things possible. FormGroups have indeed an addControl method for adding simple FormControls. AFAIK FormGroups do not have
addFormArray
oraddFormGroup
method. Therefore I need your help.Following situation:
this.myForm = this.fb.group({ id: this.fb.control([this.book.id]), // or short form `id: [this.book.id],` });
Adding a simple control at a later point in time is easy:
this.myForm.addControl('isbn', this.fb.control(this.book.isbn));
But what about adding FormArrays and FormGroups into an existing FormGroup? For instance, I would like to use the following array and object for this purpose:
const authors = ['George Michael', 'Aretha Franklin']; const metaData = { description : 'Great Book', publication: 2019}
I would like to add
authorsArray
ormetaData
only then if they are existing. That's the reason, why I want to add them at a later time.p.s. Please ignore the validation rules.
-
Lonely about 5 yearsthank you, how would you add authors and metaData in the case above?
-
Joey Gough about 5 years
this.myForm.addControl('isbn', this.fb.group({ authors : [], metaData: ''}));
- have not tested but that might work -
Grégory Elhaimer about 5 yearsEdited accordingly
-
Eliseo about 5 yearsI supouse you can use
this.myForm.addControl('authors',new FormArray(authors .map(x=>new FormControl(x))))
-
Lonely about 5 years@GrégoryElhaimer thank you but: at a later point in time, not in time of creation of the whole group.
-
Grégory Elhaimer about 5 yearsyou still can use the form builder with the addControl method.
-
Eliseo about 5 yearsOr, if you want a empty formArray
this.myForm.addControl('authors',new FormArray([]))
-
Lonely about 5 years@Eliseo thank you, would you use
authors
in the example above? -
Lonely about 5 years@GrégoryElhaimer you mean that one:
this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']));