Angular Reactive Forms，在模板中使用“myForm.get('myFormControl'')”是一种不好的做法吗？答案

【问题标题】：Angular Reactive Forms, is it a bad practice to use "myForm.get('myFormControl'')" in the template?Angular Reactive Forms，在模板中使用“myForm.get('myFormControl'')”是一种不好的做法吗？
【发布时间】：2020-10-09 08:24:44
【问题描述】：

我知道在 Angular 模板中使用函数调用是一种不好的做法。总之就是因为Change Detection会使函数运行多次，从而导致性能不佳。 (This article goes more into depth on the topic)

我一直严格遵守这条规则，除了一个例外，那就是我需要模板中反应式表单中的值。通常我是这样使用的：

我的做法

模板：<div *ngIf="myFormGroup.get('name').invalid">Filling out name is required</div>

这里我没有遵守规则，因为我在模板中调用了函数 myFormGroup.get('name')。为了解决这个问题，我决定去 Angular 文档看看他们是如何做到的，我在这里找到了一个类似的例子：https://angular.io/guide/form-validation#built-in-validator-functions。

Angular 文档所做的是将表单控件放在 getter 中，然后在模板中使用 getter，如下所示：

Angular 文档的实现方式

组件类：get name() { return this.myFormGroup.get('name'); }

模板：<div *ngIf="name.invalid">Filling out name is required</div>

我的问题是

是否可以在模板中使用“myFormGroup.get('name')”，即使它违反了模板中没有函数调用的规则？
在性能方面，Angular 文档的执行方式与我的执行方式有什么不同吗？（我的理解是，以这种方式使用吸气剂并不能解决变更检测性能问题）

【问题讨论】：

可以使用 getter，因为 Angular 将它们视为简单值，因此：_count = 10; get count(): number { return this._count; } TEMPLATE:
和做的一样：ngOnInit(): void { this.count = 10; } 模板：

标签： javascript angular angular-reactive-forms angular-changedetection

【解决方案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;
}

【讨论】：

感谢您的回答，但我认为您实际上并没有回答我的问题。