Синтаксис использования имен переменных для проверки ошибок

Question

Я строю динамические поля ввода с обязательной проверкой внутри ngFor. Я построил имена, используя field{{idxVar}}, где idxVar - индекс, но как мне использовать это для проверки ошибки

<span [ngClass]="{'active' : field{{idxVar}}.errors}">*Mandatory</span>
<input type="text" [required]="itmVar.is_required ? 'required' : null" name="field{{idxVar}}" [(ngModel)]="user.customFields[idxVar]"
            #field{{idxVar}}="ngModel">

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

'active' : field{{idxVar}}.errors

Answer 1

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

В вашем контроллере есть объект fields.

Тогда ваш код шаблона станет чем-то вроде

<span [ngClass]="{'active' : field[idxVar].errors}">*Mandatory</span>
<input type="text" [required]="itmVar.is_required ? 'required' : null" name="field[idxVar]" [(ngModel)]="user.customFields[idxVar]">

Вот быстрый пример в Stackblitz https://stackblitz.com/edit/angular-p4zemy

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

Answer 2

Для NgModel внутри * ngFor, вы можете использовать уникальную переменную ссылки на шаблон. Каждое поле ввода связано с соответствующей ссылкой на шаблон, индекс массива не требуется.

<div *ngFor="let idxVar of valueArray">
  <span [ngClass]="{'active' : field.errors}">*Mandatory</span>
    <input type="text" name="field{{idxVar}}" [ngModel]="valueArray[idxVar]"
                #field="ngModel" (ngModelChange)="callback(field)">
    <div>{{ field.control.errors | json }}</div>
</div>

Вот код стекаблика https://stackblitz.com/edit/angular-a4skhz