How to append new FormGroup or FormControl to form

Question

I have the following form in Angular created with FormBuilder:

constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
             


        

Answer 1

In my opinion, you could just use an intermediate variable for this purpose. Take a look at the next example:

  constructor(private fb: FormBuilder) {
    let group = {
      'name': ['', [Validators.required]],
      'surname': ['', [Validators.required]],
      'email': ['', [Validators.required]]
    };

    let middlename = true;

    if(middlename) {
      group['middlename'] = ['', [Validators.required]];
    }

      this.myForm = fb.group(group);
    }

Also, it would a better idea to transfer a form initiation in ngOnInit hook, instead of component constructor.

Answer 2

To add upon what @ranakrunal9 said.

If you would like to use validators with addControl do the following:

this.myForm.addControl('newControl', new FormControl('', Validators.required));

Just don't forget to add the following import

import {FormControl} from "@angular/forms";

Reference to addControl: https://angular.io/api/forms/FormGroup#addControl

Reference to FormControl: https://angular.io/api/forms/FormControl

Answer 3

You can use addControl method of FormGroup class as per documentation

So you can do as below :

this.myForm.addControl('newcontrol',[]);

Answer 4

I had the same issue, but since I already have a empty FormGroup {} inside the main FormGroup I was able to append FormControls like this:

(this.myForm.get("form_group_name") as FormGroup).addControl("item1", new FormControl("default val"));