如何将新的 FormGroup 或 FormControl 附加到表单

Question

I have the following form in Angular created with FormBuilder :

constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
        'name': ['', [Validators.required],
        'surname': ['', [Validators.required],
        'email': ['', [validateEmail]],
        'address': fb.group({
            'street': [''],
            'housenumber': [''],
            'postcode': ['']
        }, { validator: fullAddressValidator })
    });
}

Does exist a way to programmatically append new fields such as FormControl or new FormGroup to myForm ?

I mean if I want to add new fields on demand or on some conditions, how to add items to the same form that is created the first time in the constructor ?

Answer 1

You can use addControl method of FormGroup class as per documentation

So you can do as below :

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

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

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 4

我遇到了同样的问题，但由于我在主 FormGroup 中已经有一个空的 FormGroup {} ，我能够像这样附加 FormControls：

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