使用帶有動態輸入列表的模板驅動表單（ngFor）

我是web開發新手，正在使用angular2來處理MEAN堆棧項目。我想添加模板驅動的形式與使用ngFor的動態輸入列表 - 但我確實觀察到一種異常行爲與我實現它的方式。我想知道我是否以正確的方式做...使用帶有動態輸入列表的模板驅動表單（ngFor）

異常行爲：如果我要添加2個或更多輸入字段並刪除非最後條目輸入，下次我添加新條目時，它會重置我剛剛刪除的條目下的所有條目。另外，不知何故新條目與上面的條目綁定？

demo of the issue

這裏是我的plunker： 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>

任何幫助表示讚賞。謝謝！

來源

2016-09-24 RunningBear

我喜歡在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

來源

2016-09-24 06:53:49 yurzui

您正確+1接住了.. –

哎呀。非常感謝！：D – RunningBear

不客氣！ – yurzui

使用帶有動態輸入列表的模板驅動表單（ngFor）

回答

相關問題