Dynamische Angular2 Form mit ngModel von ngFor Elementen

Question

Ich versuche, ein dynamisches Formular zu erstellen, das mit einem ngModel verbunden ist, das dem Benutzer erlaubt, mehr Kontrollen hinzuzufügen, wie gebraucht. So wie das Bild unten:

image

Die Form verhält sich wie erwartet, außer wenn eine neue Reihe von Kontrollen hinzugefügt, wie es der vorherige Eingabe Inhalt löscht. Auch wenn das Modell nicht geändert wird. Ich habe dieses plunkr erstellt, um das Verhalten zu demonstrieren, über das ich spreche.

Dies ist die HTML-Vorlage schrieb ich:

<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>

und das Typoskript Komponentendefinition:

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); 
    } 
} 

ich dieses Verhalten nicht verstehen können, und alle damit verbundenen Fragen, die ich fand, waren über ältere Versionen von eckigen und keiner hatte ein ähnliches Problem.

Vielen Dank!

Answer 1

Ihre Steuerelemente benötigen eindeutige Namen, damit sie in Angular2 ordnungsgemäß funktionieren. Also folgendes tun:

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