Как передать formControlName объекту FormArray - Angular 2 (ReactiveFormsModule)

В моем приложении я сделал форму с помощью Reactive Forms. В моем приложении есть кнопка Add new Fields, при нажатии на которую добавляются новые поля.

Я могу добавлять новые поля, но не могу назначить formControlName.

Может ли кто-нибудь показать мне правильный путь, как я могу добавить formControlName к этим динамически добавляемым полям.

Вот Plnkr для этого.


angular angular-reactive-forms formarray
person Dalvik    schedule 22.06.2017    source источник

Ответы (1)


arrow_upward
11
arrow_downward

У вас есть 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>

Фиксированный планкер

Смотрите также

person yurzui    schedule 22.06.2017
comment
спасибо теперь работает. Я искал, но не нашел никакой информации о том, как использовать formArrayName, как это. Если возможно, не могли бы вы предоставить мне любую ссылку, по которой я могу подробно изучить. - person Dalvik; 22.06.2017
comment
Ссылка на плункер у меня никогда не загружается :( - person Crystal; 25.09.2019
comment
@Crystal Я обновил ссылку plnkr.co/edit/jdFnKtwb1lRPMERllSMR?p=preview - person yurzui; 25.09.2019
comment
Для тех, кто использует mat-table, используйте этот ответ, чтобы получить индекс. - person adam0101; 25.09.2020