Angular Реактивные формы, является ли плохой практикой использование "myForm.get ('myFormControl' ')" в шаблоне?

Question

Я знаю, что использование вызовов функций в шаблонах Angular - плохая практика. Короче говоря, это связано с тем, что обнаружение изменений заставит функцию запускаться много раз, что приведет к снижению производительности. ( Эта статья более подробно рассматривает topi c)

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

Мой способ сделать это

Шаблон: <div *ngIf="myFormGroup.get('name').invalid">Filling out name is required</div>

Здесь я не следую правилу, потому что я я вызываю функцию myFormGroup.get ('name') внутри моего шаблона. Чтобы решить эту проблему, я решил go перейти к документации Angular, чтобы увидеть, как они это делают, и нашел здесь аналогичный пример: https://angular.io/guide/form-validation#built -in-validator-functions .

Что делает документация Angular, так это то, что они помещают элемент управления формы в получатель, а затем используют получатель в шаблоне, например:

Angular способ сделать это в документации

Класс компонента: get name() { return this.myFormGroup.get('name'); }

Шаблон: <div *ngIf="name.invalid">Filling out name is required</div>

Мои вопросы:

1. Можно ли использовать myFormGroup.get ('name') в шаблоне, даже если это нарушает правило отсутствия вызовов функций в шаблоне?

2. Является Angular Документальный способ сделать это отличается от моего, когда дело касается производительности? (Насколько я понимаю, использование получателя таким образом не решает проблему производительности обнаружения изменений)

Answer 1

Это можно сделать так:

В шаблоне:

<input type="text" id="name" formControlName="name" />
<div *ngIf="isControlInvalid('name')">
 Something
</div>

В компоненте:

isControlInvalid(controlName: string): boolean {
 const control = this.myForm.controls[controlName];

 const result = control.invalid && control.touched;

 return result;
}