角度4ダイナミックフォームグループ

Question

私はイムより2つのダイナミックフィールド イム呼び出して、この機能の追加]をクリックし追加でこの

を達成しようと、ダイナミックなフォーム・グループを作成しようとしています：

を

onAddSurgeries(){ 
    const control = new FormGroup({ 
     'surgery': new FormControl(null), 
     'illness': new FormControl(null) 
    }); 
     (<FormArray>this.form.get('surgeries')).push(control); 
} 

、これが私のHTMLはどのように見えるかです：

<tr *ngFor="let ctrl of form.get('surgeries')['controls']; let i = index"> 
    <td><input type="text" class="form-control" [formControlName]="ctrl['controls'].surgery"></td> 
    <td><input type="text" class="form-control" [formControlName]="ctrl['controls'].illness"></td> 
</tr> 

私は間違いを知っています、formControlNameは "ctrl['controls'].surgery"ではいけません。の2つのコントロールの代わりにformcontrolの1つしかない場合、 "i"をformcontrolnameとしていますが、この場合はわかりませんformControlName に入力する必要があります。フォームを送信すると、両方の入力値がフォームグループコントロールと同期されていないため空白になります。

Answer 1

formArrayNameのマーキングがありません。また、formgroupをformarrayにプッシュしています.formarrayには、テンプレート内で反復でインデックス値をマークする必要があります。 、

<table> 
    <ng-container formArrayName="surgeries"> 
    <tr *ngFor="let ctrl of form.get('surgeries')['controls']; let i = index" 
     [formGroupName]="i"> 
     <td><input type="text" class="form-control" formControlName="surgery"></td> 
     <td><input type="text" class="form-control" formControlName="illness"></td> 
    </tr> 
    </ng-container> 
</table> 

DEMO