Angular表单模板变量报错：Property 'firstName'不存在于LoginComponent

我在Angular表单中为输入元素声明了模板变量#firstName=ngModel，表单代码如下：

<div class="container d-flex justify-content-center align-items-center w-100">
  <form #loginForm="ngForm">
    <div class="container">
      <label *ngIf="user.loginType === 'register'" for="firstName"
        ><b>First Name</b></label
      >
      <input
        class="form-control"
        [(ngModel)]="user.firstName"
        *ngIf="user.loginType === 'register'"
        type="text"
        placeholder="Enter first name"
        name="firstName"
        #firstName="ngModel"
        required
     />
      <div *ngIf="firstName.errors?.['required']" class="error-color">
        FirstName is required
      </div>
    </div>
  </form>
</div>

随后通过如下代码检查模板变量的错误：

<div *ngIf="firstName.errors?.['required']" class="error-color">
  FirstName is required
</div>

Angular提示错误：Property 'firstName' [in firstName.errors] does not exist on type 'LoginComponent'.ngtsc(2339)。我了解模板变量无需在组件中声明，请问该错误的原因是什么？

原因分析 #

报错的核心原因是模板变量的作用范围与*ngIf的渲染逻辑冲突：

• 输入框被*ngIf="user.loginType === 'register'"包裹，只有当条件满足时，该输入框才会被渲染到DOM中，对应的模板变量#firstName才会存在。
• 错误提示的<div>没有被同样的*ngIf条件包裹，当user.loginType !== 'register'时，输入框未渲染，模板中引用的firstName变量就找不到对应的DOM元素。此时Angular模板编译器会默认尝试从组件类（LoginComponent）中查找名为firstName的属性，但你并未在组件中声明该属性，因此抛出2339错误。

解决方案 #

方案1：将错误提示与输入框放在同一*ngIf容器内 #

把输入框和错误提示都包裹在同一个带*ngIf的容器中，确保只有输入框存在时，才会渲染并引用firstName变量：

<div class="container d-flex justify-content-center align-items-center w-100">
  <form #loginForm="ngForm">
    <div class="container">
      <!-- 将输入框和错误提示放在同一个*ngIf容器内 -->
      <div *ngIf="user.loginType === 'register'">
        <label for="firstName"><b>First Name</b></label>
        <input
          class="form-control"
          [(ngModel)]="user.firstName"
          type="text"
          placeholder="Enter first name"
          name="firstName"
          #firstName="ngModel"
          required
        />
        <div *ngIf="firstName.errors?.['required']" class="error-color">
          FirstName is required
        </div>
      </div>
    </div>
  </form>
</div>

方案2：通过表单对象获取控件状态 #

利用表单模板变量#loginForm="ngForm"，直接从表单对象中获取firstName控件的状态，避免依赖DOM中的模板变量：

<div class="container d-flex justify-content-center align-items-center w-100">
  <form #loginForm="ngForm">
    <div class="container">
      <label *ngIf="user.loginType === 'register'" for="firstName"
        ><b>First Name</b></label
      >
      <input
        class="form-control"
        [(ngModel)]="user.firstName"
        *ngIf="user.loginType === 'register'"
        type="text"
        placeholder="Enter first name"
        name="firstName"
        required
     />
      <!-- 通过表单对象的controls属性获取控件状态 -->
      <div *ngIf="loginForm.controls['firstName']?.errors?.['required']" class="error-color">
        FirstName is required
      </div>
    </div>
  </form>
</div>

内容的提问来源于stack exchange，提问作者koque