ngFormat ngModel的動態angular2表單

我試圖創建一個連接到ngModel的動態表單，它允許用戶根據需要添加更多的控件。正如圖片波紋管：ngFormat ngModel的動態angular2表單

的形式表現如預期，因爲它會刪除先前輸入的內容添加一個新的控件集時除外。即使模型沒有改變。我創建了這個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); 
    } 
}

我無法理解這樣的行爲，以及所有相關的我發現的問題是關於角度的舊版本，沒有一個有類似的問題。

謝謝！

來源

2016-07-28 Rafael Gil

您的控件需要獨特的名稱才能在Angular2中正常工作。所以做到以下幾點：

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

來源

2016-07-28 14:42:15 Pace

ngFormat ngModel的動態angular2表單

回答

相關問題