角度ダイナミックフォームグループの入力

Question

私は基本的な家族情報を持ったフォームを持っています。それから私は家族の子供に追加するフォームの一部をしたい。さて、UIの中でいくつかの点で、より多くを追加するためのオプションを指定して、子供の名前の入力があるでしょう

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

：私はこのようになりますこと、反応性フォームを使用しています。プログラムによって入力フィールドを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: [''] 
    })); 
} 

ように見えますもう一度、これは別の方法ですが、私は@シークレットの答えを掘り下げた後でしか見つかりませんでした。ありがとう@覚え書き！

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要素を「直接」直接操作するための推奨方法）