Angular如何用模板变量访问FormGroup内FormControl简化代码

直接在input元素上定义#fieldRef模板变量时，变量默认引用的是原生HTMLInputElement DOM对象，并非Angular表单体系中的FormControl实例，自然不存在hasError方法，所以写法无效。

• 方案1：模板变量绑定表单指令实例（无需修改组件TS代码）
  响应式表单中formControlName指令本身支持导出引用，给模板变量指定导出值即可拿到指令实例，再通过其control属性访问对应FormControl：

  <form [formGroup]="form">
      <mat-form-field>
          <mat-label>Field</mat-label>
          <!-- 绑定formControlName指令的导出实例 -->
          <input type="text" matInput formControlName="field" #fieldRef="formControlName">
          <!-- 直接通过变量访问control属性即可调用hasError -->
          <mat-error *ngIf="fieldRef.control.hasError('required')">
              Email is <strong>required</strong>
          </mat-error>
          <mat-error *ngIf="fieldRef.control.hasError('otherError')">
             ...
          </mat-error>
      </mat-form-field>
  </form>
  

  如果你是用[formControl]直接绑定控件而非formControlName，则将模板变量写为#fieldRef="ngForm"即可，访问方式一致。

• 方案2：组件类定义控件getter（类型友好，推荐长期使用）
  在组件TS类中为需要频繁访问的控件写一个getter，模板中可以直接访问，无需额外定义模板变量，同时支持TS类型校验：

  // 组件类代码
  get field() {
    // 可根据需要加类型断言，获得更好的TS类型提示
    return this.form.get('field') as FormControl;
  }
  

  模板中直接使用即可：

  <mat-error *ngIf="field.hasError('required')">
      Email is <strong>required</strong>
  </mat-error>
  

  这种写法没有模板作用域限制，整个组件模板任意位置都能直接访问控件，是最稳定的通用方案。

• 方案3：用模板语法将控件缓存为局部变量（无需改TS，作用域灵活）
  利用Angular模板的as语法，在元素父级直接将form.get()的结果存为局部变量，当前元素子树内都可以直接使用：

  <form [formGroup]="form">
      <!-- 取到控件后存为fieldCtrl局部变量，整个mat-form-field内可用 -->
      <mat-form-field *ngIf="form.get('field') as fieldCtrl">
          <mat-label>Field</mat-label>
          <input type="text" matInput formControlName="field">
          <mat-error *ngIf="fieldCtrl.hasError('required')">
              Email is <strong>required</strong>
          </mat-error>
          <mat-error *ngIf="fieldCtrl.hasError('otherError')">
             ...
          </mat-error>
      </mat-form-field>
  </form>
  

  Angular 17+用新的控制流语法写法更简洁：

  @if (form.get('field'); as fieldCtrl) {
    <mat-form-field>
      <!-- 同上表单内容 -->
    </mat-form-field>
  }
  

  注意：因为form.get()在控件不存在时会返回null，所以这里用*ngIf/ @if包裹可以同时做空值保护，不会出现调用null方法的报错。

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