将模板驱动表单与动态输入列表 (ngFor) 结合使用

Question

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

异常行为：如果我要添加 2 个或更多输入字段并删除非最后输入的输入，下次我添加新条目时，它会重置我刚刚删除的条目下面的所有条目。此外，新条目是否以某种方式与上面的条目绑定？

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

下面是我使用 ngFor 实现带有动态输入的模板驱动表单的方法。我指的是另一个 Whosebug post: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) 结合使用

Using template driven form with dynamic input list (ngFor)

angular

angular2-forms

ngfor