Создать динамически angular 2+ ссылочной переменной ngModel для ввода

Question

Я хочу создать входную ссылочную переменную Dynami c ngModel для проверки требуемой проверки.

Вот моя реализация:

<div *ngFor="let priceId of prices">
  <input [(ngModel)]="getPriceValue(priceId)" #price="ngModel"/>
  <div *ngIf="price.invalid && (routePrice.dirty || price.touched)" class="invalid-feedback">
    required field!
 </div>
</div>

Для одиночной ссылки это работает, но множественные ссылки с тем же ссылка #price не работает. Потому что ему нужна уникальная ссылочная переменная.

Я хочу установить вот так:

<input [(ngModel)]="getPriceValue(priceId)" #price_{{priceId}}="ngModel"/>

Но это не работает.

Как установить динамическую c ссылочную переменную в angular 2+?

Спасибо

Answer 1

В файле HTML:

<form #f="ngForm">
  <input [(ngModel)]="getPriceValue(priceId)" #price="ngModel" name="price" required/> 
  <button class="btn" (click)="onClick(f)">btn</button>
</form>

В файле TS:

onClick(f: NgForm) {
  this.checkForm(f);
}

checkForm(form) {
  const control = form.controls;
  Object.keys(control).forEach(controlName =>
    control[controlName].markAsTouched());
  Object.keys(control).forEach(controlName =>
    control[controlName].markAsDirty());
  const data = [];
  Object.keys(control).map((key) => {
    const newObj = {key, value: control[key]};
    data.unshift(newObj);
  });
  let title = '';
  for (let i = 0; i < data.length; i++) {
    const error = data[i].value.errors ? Object.keys(data[i].value.errors) : [];
    const inputKey = data[i].key;
    for (let x = 0; x < error.length; x++) {
      title = inputKey.toUpperCase() + '_' + error[x].toUpperCase();
      alert(title);
    }
  }
}

Я делаю это с проверкой Dynami c с использованием этого имени входа и атрибута проверки.