Использование тега Form HTML с ngFor заставляет ngModel использовать последний результат переменной цикла вместо текущего.

Пожалуйста, взгляните на Plnkr ниже. Если вы раскомментируете тег html в app.html, все дети будут Тимами.

<!--<form #form="ngForm">-->
  <div class="row">
    <div class="col-lg-12" *ngFor="let employee of employees">
      <div class="col-lg-6">
        <label for="employee">Employee</label>
        <input type="text" class="form-control" id="employee" [(ngModel)]="employee.firstName" name="employee">
      </div>
      <div class="row">
        <div class="col-lg-12" *ngFor="let kid of employee.kids" style="border:1px solid #cecece;">

          <div class="col-lg-4">
            <label for="kid">Kid - {{kid.name}}</label>
            <input type="text" class="form-control" id="kid"  [(ngModel)]="kid.name" name="kid">
          </div>

        </div>


      </div>
    </div>
  </div>
<!--</form>-->

https://plnkr.co/edit/AyOVBXAoa8kuE1CQf6XB?p=preview

Я хотел бы использовать функцию формы Angular2, поэтому ее нельзя пропустить и заменить некоторыми javascripts.


angular angular2-forms ngfor angular2-ngmodel
person Laz London    schedule 16.01.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Добавьте [ngModelOptions]="{ standalone : true }" к вашему вводу в цикле for, чтобы сделать их все уникальными (точнее, они не будут добавлены в один и тот же экземпляр FormGroup):

<input type="text" class="form-control" id="kid"  [(ngModel)]="kid.name" 
[ngModelOptions]="{ standalone : true }" name="kid">
person Stefan Svrkota    schedule 16.01.2017
comment
Удобно, наверняка пригодится. Вверх. - person prajeesh kumar; 16.01.2017