Angular 2 稍后将表单控件转换为表单组

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

Answer 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

Answer 2

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