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

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

демо проблемы

Вот мой поршень:http://plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah?p=preview

Вот способ, которым я реализую управляемую шаблоном форму с динамическим вводом, используя ngFor. Я имел в виду еще один пост, посвященный стековому потоку: angular-2-template-driven-form-with-ngfor-input

<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>

Любая помощь приветствуется. Спасибо!