首页 文章

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

提问于
浏览 次
5

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

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

demo of the issue

这是我的傻瓜：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>

任何帮助表示赞赏 . 谢谢！

angular angular2-forms ngfor

1 回答

  • 7

    我喜欢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

    回复于

相关问题