推送到阵列内部形式时失去双向绑定(Angular 2)

Question

我正在使用Angular 2构建一个基本的CRUD应用程序.其中一个表单字段是一系列成分.我有一个addIngredient方法,将一个新的推Ingredient送到我的ingredients数组.一旦我单击触发此方法的按钮,双向绑定就会丢失.查看诊断数据时,一切看起来都是正确的,但数据从表单UI中丢失(请参阅下面的gif):

相关HTML:

<div *ngFor="let ingredient of newRecipe.ingredients; let i = index; let f = first; let l = last">
  <md-input type="text" id="ingredientName" name="ingredientName" [(ngModel)]="ingredient.name" placeholder="ingredient" required></md-input>
  <md-input type="text" id="ingredientAmount" name="ingredientAmount" [(ngModel)]="ingredient.amount" placeholder="amount" required></md-input>
  <select id="ingredientMeasurement" name="ingredientMeasurement" [(ngModel)]="ingredient.measurement" required>
    <option *ngFor="let measurement of measurements" [value]="measurement">{{measurement}}</option>
  </select>
  <button md-icon-button color="primary" *ngIf="l" (click)="addIngredient()">
    <md-icon>add</md-icon>
  </button>
  <button md-icon-button color="warn" *ngIf="!f" (click)="removeIngredient(i)">
    <md-icon>remove</md-icon>
  </button>
</div>

课程相关代码:

addIngredient() {
  this.newRecipe.ingredients.push(new Ingredient());
}

注意:div上面引用的内容出现在form元素内.当我把它移到div外面时,form一切都按预期工作.

Answer 1

这里发生的<form>是使用输入的name属性来同步模型的值.在这种情况下,它基本上覆盖了[ngModel]同步.

你可以做些什么来解决这个问题name:动态:

<div *ngFor="let ingredient of newRecipe.ingredients; let i = index;">
   <md-input type="text" name="ingredientName_{{i}}"   
    [(ngModel)]="ingredient.name" placeholder="ingredient" required>
   </md-input>
</div>

(即name="ingredientName_{{i}}")

您可以在以下文档中阅读有关此内容的更多信息:https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html

在标记中使用ngModel时,您还需要提供name属性,以便可以使用该名称下的父窗体注册该控件.

值得注意的是,在父表单的上下文中,您通常可以跳过单向或双向绑定,因为父表单将为您同步值.