Как я могу ссылаться на элемент управления, добавленный в ngFor?

Я добавляю несколько входных данных, используя ngFor в форме, управляемой шаблоном, и я хотел бы добавить соответствующие сообщения об ошибках, когда входные данные недействительны. Обычно, если бы я не использовал ngFor, я бы использовал #inputName="ngModel". Есть ли способ сделать что-то подобное, чтобы ссылаться на динамически добавленный ввод?

В основном я хочу сделать что-то вроде этого:

<div *ngFor="let field of fields; let i = index">
        <label>{{field.label}}</label> <input [ngModel]="field.value" required #field{{i}}="ngModel" />
        <div *ngIf="field{{i}}.invalid"> This field is required </div>
</div>

angular ngfor angular-validation angular2-template
person Learning2Code    schedule 29.03.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

ответ garth74 почти правильный. В формах атрибут name должен быть уникальным, чтобы в вашем случае каждое поле ввода распознавалось как отдельный элемент управления формы. Итак, здесь используйте индекс для присвоения уникального имени:

name="f{{i}}"

... поэтому ваш код будет выглядеть так:

<div *ngFor="let field of fields; let i = index">
  <label>{{field.label}}</label> <input name="f{{i}}" [ngModel]="field.value" required #f="ngModel" />
  <div *ngIf="f.invalid"> This field is required </div>
</div>

Вот

ДЕМО

person AJT82    schedule 29.03.2017
comment
Да, верно. Должно быть, я пропустил ту часть о том, что она находится в форме, управляемой шаблоном :-) - person Garth Mason; 30.03.2017

arrow_upward
1
arrow_downward

Вам не нужно делать ничего особенного, чтобы сослаться на это поле в шаблоне — просто используйте псевдоним напрямую (например, «f»).

  <div *ngFor="let field of fields; let i = index">
    <label>{{field.label}}</label> <input [ngModel]="field.value" required #f="ngModel" />
    <div *ngIf="f.invalid"> This field is required </div>
  </div>
person Garth Mason    schedule 29.03.2017