为什么表单错误的 getter 在我的 Angular Reactive Form 组件模板中不起作用，但直接引用却可以？

Question

快速提问。这是那些令人烦恼的小错误之一。我在延迟加载的注册模块中有一个 Angular 反应形式。代码结构如下：

TS

get email() {
  return this.myForm.get('email');
}
// This code works from within the component, but not when referenced from within the template.

超文本标记语言

<div class="errors" *ngIf="email.errors?.required && email.touched">Must enter email</div>

在模板中，div 永远不会显示，因为即使存在错误，表达式也永远不会计算为 true。我已经检查过控制台。

更令人困惑的是，我在 中使用 getter 没有问题component.ts，事实上，我的方式console.log是通过编写console.log(this.email.errors). 这很好用。但模板中没有。

我的混乱解决方案是直接访问错误，这确实有效：

<div class="errors" *ngIf="myForm.controls.email.errors.required && myForm.controls.email.touched">
  Must enter email
</div>
// This works! As you can see the expression is very long and messy.

任何帮助表示赞赏！

Answer 1

您是否有机会#email在输入字段中使用模板引用变量，例如：<input #email ...>？

这样就可以解释问题了。我做了一个 Stackblitz 重现了错误：https://stackblitz.com/edit/angular-qyt7kb

在该示例中，firstName 输入具有模板引用变量 #firstName 并且错误 div 从未显示。正确显示姓氏错误 div。

<form [formGroup]="form">

    <label>
      First Name:
      <input #firstName type="text" formControlName="firstName">
    </label>
    <div *ngIf="firstName.errors?.required && firstName.touched">*FIRST Name is Required</div>

    <label>
      Last Name:
      <input type="text" formControlName="lastName">
    </label>
    <div *ngIf="lastName.errors?.required && lastName.touched">*LAST name is Required</div>

</form>

这样看来，在模板中，模板引用变量的优先级高于TS文件中同名的getter。在示例中，您可以看到 console.log 正如您所说的那样正确打印错误。