Entrées de groupe de formes dynamiques angulaires

Question

J'ai donc un formulaire qui contient des informations de base sur la famille. Ensuite, je veux avoir une partie du formulaire à ajouter aux enfants de la famille. J'utilise des formes réactives, qui ressemble à quelque chose comme ceci:

this.details = fb.group({ 
     firstName: ['', Validators.required], 
     lastName: ['', Validators.required], 
     email: ['', Validators.compose([Validators.required, Validators.email])], 
     phone: ['', Validators.required] 
    }); 

Maintenant, à un moment donné dans l'interface utilisateur, il y aura des entrées pour les noms des enfants, avec la possibilité d'ajouter plus. Puis-je ajouter par programmation plusieurs champs de saisie au groupe this.details?

Mise à jour

@ réponse de navigation privée est parfaite pour la question initiale, j'ai demandé. Il restera la réponse sélectionnée. Tout en creusant sa réponse, j'ai aussi trouvé FormArray, qui est la direction dans laquelle j'ai fini, donc je voulais ajouter ça ici. Il ressemble à:

this.form = this.fb.group({ 
    ... 
    children: this.fb.array([ 
    this.fb.group({ 
     name: ['', Validators.required], 
     age: ['', Validators.required], 
     gender: ['', Validators.required] 
    }) 
    ]) 
}); 

Ensuite, le point de vue ressemble à:

<form [formGroup]="form"> 
    <div *ngFor="let child of form.controls.children.controls; let i = index;" 
     formArrayName="children" 
     class="childForm"> 
     <div [formGroupName]="i" 
      class="row"> 
      <div class="col-md-4"> 
       <input type="text" 
         class="form-control" 
         formControlName="name"> 
      </div> 
      <div class="col-md-4"> 
       <input type="number" 
         class="form-control" 
         formControlName="age"> 
      </div> 
      <div class="col-md-4"> 
       <select class="form-control" 
         formControlName="gender"> 
        <option value="male">Male</option> 
        <option value="female">Female</option> 
       </select> 
      </div> 
     </div> 
    </div> 
    <button (click)="addChild()" 
      class="btn btn-primary"> 
     <i class="fa fa-plus"></i> Add Another Child 
    </button> 
</form> 

Et la fonction addChild référencé sur le bouton en bas de la forme ressemble à:

addChild() { 
    const children = <FormArray>this.form.get('children'); 
    children.push(this.fb.group({ 
    name: [''], 
    age: [''], 
    gender: [''] 
    })); 
} 

Alors , encore une fois, c'est une façon différente d'y arriver, et je ne l'ai découverte qu'après avoir trouvé la réponse de @ incognito. Merci @ incognito!

Answer 1

Bien sûr, vous pouvez. La mise en œuvre pourrait être mieux, mais quelque chose comme ceci:

<button (click)="addKid()"> Add kid </button 

numberOfKids: number = 0; 

addKid() { 
this.numberOfKids++; 
let input = this.renderer.createElement('input'); 
this.renderer.appendChild(form, input); 
this.renderer.setProperty(input, 'formControlName', this.numberOfKids); 

this.details.addControl(this.numberOfKids, new FormControl('')); 
} 

Ainsi, chaque FormControl pour chaque enfant sera nommé comme un numéro.

Cette mise en œuvre est basée sur Renderer2 (méthode recommandée pour « directement » manipuler des éléments DOM)