Angular2 не может использовать ngModel в форме, повторяемой ngFor

Question

Как использовать ngModel для входов через несколько форм, которые повторяются ngFor?

Angular2 дает мне ошибку, когда я пытаюсь это сделать.

Error: Permission denied to access property "rejection"

Пример блок проблемного кода:

<div *ngFor="let item of items"> 
    <form name="itemForm"> 
     {{item.name}}<input [(ngModel)]="item.name"> 
    </form> 
</div> 

Вот plunker https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview

Если удалить тэг формы, то все бегут без проблем, но мне нужно, так что я могу используйте клавишу ввода на всех входах для обновления соответствующих данных в их собственной форме.

Answer 1

Если в теге формы используется ngModel, то должен быть установлен либо атрибут name, либо элемент управления формой должен быть определен как «автономный» в ngModelOptions.

Ниже будет работать без каких-либо ошибок:

<div *ngFor="let item of items"> 
    <form name="itemForm"> 
    {{item.name}}<input [(ngModel)]="item.name" [ngModelOptions]="{standalone: true}"> 
    </form> 
</div> 

Answer 2

Как отметил @ ranakrunal9 вы можете использовать уникальный атрибут имя для входа. Вот код:

<div *ngFor="let item of items; let index=index"> 
    <form name="itemForm"> 
     {{item.name}}<input [(ngModel)]="item.name" name={{index}}> 
    </form> 
</div>