Angular 2 Turn form control into form group later

Question

I have a form array with a control called "foreground" which is null to start with:

(<FormArray>this.myForm.get('rooms')).push(this.fBuilder.group({
                id: [element.id, [Validators.required]],
                background: null,
                foreground: null,
            }));

But how can I turn it onto a form group with fields under it later on? I tried this:

room.controls.foreground(this.fBuilder.group({
                foregroundImageID: [null, [Validators.required]],
                foregroundImagePath: [null, [Validators.required]],
                foregroundXPosition: [null, [Validators.required]],
                foregroundYPosition: [null, [Validators.required]]
            }));

Jameer Khan · Accepted Answer · 2020-01-14 11:25:30Z

1

You can do it something like below:

(<FormArray>this.myForm.get('rooms')).push(this.fBuilder.group({
    id: [element.id, [Validators.required]],
    background: null,
    foreground: null
}));

Now SetControl like this-

this.myForm.controls.rooms['controls'][0].setControl('foreground', this.fBuilder.group({
      foregroundImageID: [null, [Validators.required]],
      foregroundImagePath: [null, [Validators.required]],
      foregroundXPosition: [null, [Validators.required]],
      foregroundYPosition: [null, [Validators.required]]
}));

Note: setControl replaces the existing control. learn more about setControl

edited Jan 14, 2020 at 11:25

answered Jan 14, 2020 at 11:19

Jameer Khan

4233 silver badges10 bronze badges

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

5 Comments

Andrew Howard Over a year ago

Also how would I set that "foreground" back to null later on?

Jameer Khan Over a year ago

Glad I could help :)

Andrew Howard Over a year ago

Do you how how would I set that "foreground" back to null later on? :)

Jameer Khan Over a year ago

You can just remove the control like- this.myForm.controls.rooms['controls'][0].removeControl('foreground')

Andrew Howard Over a year ago

Hmm I got an error of "Cannot read property 'value' of undefined" doing it that way.

Soumya Gangamwar · Accepted Answer · 2020-01-14 11:00:58Z

1

Build your form like this

(<FormArray>this.myForm.get('rooms')).push(this.fBuilder.group({
                id: [element.id, [Validators.required]],
                background: null,
                foreground: this.fBuilder.array([]),
            }));

Here Now foreground working as Array, With that you can push elememts into foreground

answered Jan 14, 2020 at 11:00

Soumya Gangamwar

1,0324 gold badges20 silver badges46 bronze badges

2 Comments

Andrew Howard Over a year ago

Thanks but it has to start as null to begin with. I can't start with it being an array.

Soumya Gangamwar Over a year ago

try with setControl angular.io/api/forms/FormArray#setControl

Collectives™ on Stack Overflow

Angular 2 Turn form control into form group later

2 Answers 2

5 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Related