web-dev-qa-db-fra.com

Comment ajouter un nouveau FormGroup ou FormControl au formulaire

J'ai le suivant form dans Angular créé avec 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 })
    });
}

Existe-t-il un moyen d'ajouter par programme de nouveaux champs tels que FormControl ou de nouveaux FormGroup à myForm?

Je veux dire que si je veux ajouter de nouveaux champs à la demande ou à certaines conditions, comment ajouter des éléments au même formulaire créé la première fois dans le constructor?

formsangularangular2-formsangular2-formbuilder
19
smartmouse

Vous pouvez utiliser la méthode addControl de FormGroup classe selon documentation

Donc, vous pouvez faire comme ci-dessous:

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

Pour ajouter ce que @ ranakrunal9 a dit.

Si vous souhaitez utiliser des validateurs avec addControl, procédez comme suit:

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

N'oubliez pas d'ajouter l'importation suivante

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

Référence à addControl: https://angular.io/api/forms/FormGroup#addControl

Référence à FormControl: https://angular.io/api/forms/FormControl

17
Stas Sorokin

À mon avis, vous pourriez simplement utiliser une variable intermédiaire à cette fin. Jetez un oeil à l'exemple suivant:

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

En outre, il serait préférable de transférer une initiation de formulaire dans un hook ngOnInit, au lieu d'un constructeur de composant.

7
Boris Siscanu