角動態表格組輸入

Question

所以我有一個表格，有一些基本的家庭信息。然後，我想讓表格的一部分添加到家庭的孩子中。我使用的活性形式，這看起來是這樣的：

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

現在，在UI的一些點上，就會有孩子名字的投入，以增​​加更多的選項。我可以編程添加更多的輸入字段到this.details組？

更新

@隱姓埋名的答案是完美的原始問題，我問。它將保持選定的答案。在做一些挖掘他的答案的同時，我還發現了FormArray，這是我最終走向的方向，所以我想在這裏添加。它看起來像：

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

然後，視圖的樣子：

<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> 

，並在窗體底部的按鈕引用的addChild函數看起來像：

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

所以再次，這是一種不同的方式，我只是在挖掘了@ incognito的答案後才發現它。謝謝@incognito！

Answer 1

當然可以。實施可能會更好，但這樣的事情：

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

所以每formControl爲每一個孩子將被命名爲數字。

此實現基於Renderer2（推薦的方式來「直接」操作DOM元素）