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

Question

Я использую угловой 8 с угловым материалом, чтобы написать свой сайт.

У меня есть форма с formGroup создан и я хочу иметь возможность использовать *ngIf проверить наличие ошибок проверки, используя фактический элемент ввода в качестве параметра.

В настоящее время это мой рабочий код:

У меня есть следующая форма:

<form [formGroup]="queryForm" (submit)="runQuery()">
...
  <mat-form-field>
            <input matInput #timezone placeholder="Timezone" aria-label="Timezone" formControlName="timePeriodTimeZone"/>
            <mat-hint>timezone as a number</mat-hint>
            <mat-error *ngIf="hasError('timePeriodTimeZone','required')">timezone required</mat-error>
        </mat-form-field>
...
</form>

и в классе компонента я реализовал hasError() функционировать так:

 public hasError = (controlName: string, errorName: string) =>{
    return this.queryForm.controls[controlName].hasError(errorName);
  }

и конечно я настроил queryForm переменная как группа, созданная построителем форм.

Есть ли способ проверить ошибку, не вызывая функцию из самого класса?

так как я добавил #timezone в поле ввода я предположил, что смогу сделать что-то вроде:

<mat-error *ngIf="timezone.hasError('required')">timezone required!</mat-error>

но я не могу!:)

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

любая информация по этому вопросу будет принята с благодарностью.

Спасибо!

Answer 1

Вы знаете, что если поле имеет уникальный валидатор, вы можете просто использовать

<mat-error>timezone required!</mat-error>

(*ngIf не является необходимым).

если вы хотите иметь большой контроль над ошибками, вы можете иметь некоторые как

<mat-error >{{getError('timezone')}}</mat-error>

и у вас есть функция, как

getError(field:string)
{
   const control=this.myForm.get(field);
   string error=''
   switch (field)
    case 'timezone':
       error=control.hasError('required')?'time zone required':
              control.hasError('other')?' other error':''
    break;
    case '....'
   }
   return error;
}