Использование формы с управляемым шаблоном с динамическим списком ввода (ngFor)

Question

Я новичок в разработке веб-страниц и работает над проектом стека MEAN с использованием углового2. Я пытаюсь добавить форму с шаблоном с динамическим списком ввода с помощью ngFor - однако я наблюдал ненормальное поведение с тем, как я его реализую. Мне интересно, правильно ли я делаю это ...

Аномальное поведение: Если бы я добавил 2 или более поля ввода и удалил вход для последних записей, в следующий раз, когда я добавлю новые записи, он сбрасывает все записи ниже той, которую я только что удалил. Кроме того, каким-то образом новые записи являются обязательными для записей выше?

demo of the issue

Вот мой plunker: http://plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah?p=preview

Вот путь, который я реализую на основе шаблонов формы с динамическим ввода с использованием ngFor. Я имел в виду другой StackOverflow пост: угловая-2-шаблонами форм-с-ngfor-входами

<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