Question

我是Web开发的新手，正在使用angular2处理MEAN堆栈项目。我正在尝试使用ngFor添加带有动态输入列表的模板驱动表单 - 但是我确实通过实现它的方式观察到异常行为。我想知道我是否正确地做到这一点......

异常行为：如果我要添加2个或更多输入字段并删除非最后条目输入，则下次添加新条目时，它会重置我刚删除的条目下方的所有条目。另外，不知何故新条目与上面的条目绑定？

这是我的傻瓜： http://plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah?p=preview

以下是使用ngFor通过动态输入实现模板驱动表单的方法。我指的是另一个stackoverflow帖子：angular-2-template-driven-form-with-ngfor-inputs

<div *ngFor="let hero of heroArray; let i = index">

             <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name"
                   required
                   [(ngModel)]="hero.name" name="name-{{i}}"
                   #name="ngModel" >
            <div [hidden]="name.valid || name.pristine"
                 class="alert alert-danger">
              Name is required
            </div>
          </div>
      </div>

感谢任何帮助。谢谢！

Answer 1

我喜欢Plunkr上的演示问题：）

我认为问题与您的name属性有关。它应该是唯一的名称。使用索引作为唯一值是错误的。更改阵列后会混合使用。

所以我建议您使用id作为唯一名称：

let uniqueId = 1;
...
addNewHero(){
  var hero: Hero  = new Hero(uniqueId++,'','');
  this.heroArray.push(hero);
}

并在html中：

<input type="text" ... name="name-{{hero.id}}">

以下是 Plunker

使用带有动态输入列表的模板驱动表单（ngFor）

1 个答案: