动态angular2形式与ngFor元素的ngModel

Question

我正在尝试创建一个连接到ngModel的动态表单,允许用户根据需要添加更多控件.正如下图所示:

图片

除非在删除上一个输入的内容时添加一组新控件,否则表单的行为与预期相同.即使模型没有改变.我创建了这个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>