Question

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

除非在删除之前输入的内容时添加一组新控件，否则表单的行为与预期相同。即使模型没有改变。我创建了这个plunkr以展示我正在谈论的行为。

这是我写的html模板：

＆＃13;

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

＆＃13;

和打字稿组件定义：

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>

动态angular2形式与ngFor元素的ngModel

1 个答案: