web-dev-qa-db-ja.com

formControlNameをFormArrayオブジェクトに与える方法-Angular 2（ReactiveFormsModule）

私のアプリケーションでは、Reactive Formsを使用してフォームを作成しました。私のアプリでは、ボタンですAdd new Fieldsこのボタンをクリックすると、新しいフィールドが追加されます。

新しいフィールドを追加できますが、formControlNameを割り当てることができません。

動的に追加されたこれらのフィールドにformControlNameを追加する方法を教えてください。

これはPlnkrです

angularangular-reactive-formsformarray
6
Dalvik

formArrayの配列のFormGroupがあります。

したがって、formArrayNameのループでformGroupNameをformControlName(itemDetail, quantity, rate...)で使用します

<table formArrayName="salesList">
    <tr>
     <th>Item Detail</th>
     <th>Quantity</th>
     <th>Rate</th>
     <th>Tax</th>
     <th>Amount</th>
    </tr>
    <!--Input controls -->
    <tr  *ngFor="let saleList of salesListArray.controls;let i = index" [formGroupName]="i">
        <td>
             <div class="col-sm-6">
                 <input class="form-control" type="text" placeholder="Item Detail" formControlName = "itemDetail"/>
             </div>
        </td>
         <td>
             <div class="col-sm-6">
                 <input class="form-control" type="text"   placeholder="0" formControlName = "quantity" />
             </div>
        </td>
         <td>
             <div class="col-sm-6">
                 <input class="form-control" type="text"   placeholder="0.00" formControlName = "rate"/>
             </div>
        </td>
         <td>
             <div class="col-sm-6">
                 <input class="form-control" type="text"   placeholder="Select a tax" formControlName = "tax"/>
             </div>
        </td>
         <td>
             <div class="col-sm-6">
                <span>{{saleList.amount}}}</span>
             </div>
        </td>
    </tr>
</table>

固定プランカー

こちらもご覧ください

6
yurzui