Динамическая угловая форма с ngМодель элементов ngFor

Question

Я пытаюсь создать динамическую форму, связанную с ngModel, которая позволяет пользователю добавлять дополнительные элементы управления по мере необходимости. Так же, как картинке ниже:

image

форма ведет себя, как и ожидалось, за исключением добавления нового набора элементов управления, как он стирает содержимое введенную ранее в. Хотя модель не изменилась. Я создал этот plunkr, чтобы продемонстрировать поведение, о котором я говорю.

Это шаблон HTML я писал:

<tr *ngFor="let work of works; let i = index"> 
 
    <td> 
 
    <select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation"> 
 
     <option>Operation 1</option> 
 
     <option >Operation 2</option> 
 
    </select> 
 
    </td> 
 

 
    <td> 
 
    <input required type="number" class="form-control" [(ngModel)]="work.cost" 
 
      name="cost"> 
 
    </td> 
 

 
    <td> 
 
    <input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours" 
 
      name="hours"> 
 
    </td> 
 

 
    <td> 
 
    <button type="button" class="btn btn-danger btn-circle" (click)="removeWork(i)">Remove</button> 
 
    </td> 
 
</tr>

и определение машинописи компоненты:

import {Component, ChangeDetectionStrategy} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/app.html' 
}) 
export class App { 
    works = []; 

    addWork(){ 
     this.works.push({}); 
    } 

    removeWork(index){ 
     this.works.splice(index, 1); 
    } 

    get diagnostic() { 
     return JSON.stringify(this.works); 
    } 
} 

Я не могу понять это поведение, и все связанное с вопросы, которые я нашел, касались более ранних версий углов, и ни одна из них не имела аналогичной проблемы.

Спасибо!

Answer 1

Ваши элементы управления нуждаются в уникальных именах для правильной работы в Angular2. Так, сделайте следующее:

<td> 
    <input required type="number" class="form-control" [(ngModel)]="work.cost" 
      name="cost-{{i}}"> 
</td>