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

Как я могу использовать 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>

Вот плункер https://plnkr.co/edit/YNZiCBeyqJoxO5ox5nlC?p=preview

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


typescript angular forms ngfor angular2-ngmodel
person Skyvory    schedule 22.11.2016    source источник
comment
Я не могу воспроизвести вашу ошибку с помощью Plunker plnkr.co/edit/Bx0zT8F0wENJ2NMZqRAy?p=preview< /а>. Однако атрибут name отсутствовал.   -  person Günter Zöchbauer    schedule 22.11.2016
comment
Странно, что плункер не выдает ошибку при втором открытии. Мой фактический код все еще давал мне ошибку, хотя она уже решена. Спасибо.   -  person Skyvory    schedule 22.11.2016
comment
Упс, это ваш plunkr, который каким-то образом работает, добавляя атрибут имени к входному тегу.   -  person Skyvory    schedule 22.11.2016
comment
Необходимо добавить имя или [ngModelOptions]="{standalone: true}". Но без name я также получил другую ошибку, чем та, которую вы упомянули в своем вопросе.   -  person Günter Zöchbauer    schedule 22.11.2016

Ответы (2)


arrow_upward
2
arrow_downward

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

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

<div *ngFor="let item of items">
  <form name="itemForm">
    {{item.name}}<input [(ngModel)]="item.name" [ngModelOptions]="{standalone: true}">
  </form>
</div>
person ranakrunal9    schedule 22.11.2016
comment
Добавление атрибута name в поле формы input имело бы больше смысла, чем говорить об этом как standalone - person Pankaj Parkar; 22.11.2016
comment
Я также склонен устанавливать атрибут name поля input. - person Thiago Passos; 23.11.2016
comment
Из документации Angular (angular.io/guide/forms): определение атрибута имени является обязательным при использовании [(ngModel)] в сочетании с формой. - person elshev; 03.02.2018

arrow_upward
0
arrow_downward

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

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