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

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

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

демонстрация проблемы

Вот мой плункер: 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
person RunningBear    schedule 24.09.2016    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Мне нравятся вопросы с демонстрацией на 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.

person yurzui    schedule 24.09.2016