Angular模板中引用FormGroup子控件，有无更优雅的实现方式？

在Angular模板中，反复使用rightForm.get('right')!获取子控件的写法过于繁琐，以下是几种更简洁的实现方式：

• 组件类定义getter属性
  在组件的TypeScript代码中添加一个getter，直接返回目标控件：

  get rightControl() {
    return this.rightForm.get('right')!;
  }
  

  之后模板里就可以直接使用rightControl代替冗长的rightForm.get('right')!：

  <form [formGroup]="rightForm">
    <input type="text" class="form-control" id="right" required formControlName="right">
    <div [hidden]="rightControl.valid || rightControl.pristine" class="alert alert-danger">
      <div *ngIf="rightControl.errors?.['required']">
        name is empty!
      </div>
    </div>
  </form>
  

• 使用Angular类型化表单（Angular 14+）
  借助类型化表单可以直接通过controls属性访问子控件，同时获得类型安全：
  首先在组件中定义表单类型并初始化：

  import { FormGroup, FormControl, Validators } from '@angular/forms';
  
  // 定义表单结构类型
  interface RightFormStructure {
    right: FormControl<string>;
  }
  
  // 初始化类型化表单
  rightForm = new FormGroup<RightFormStructure>({
    right: new FormControl('', { nonNullable: true, validators: Validators.required })
  });
  

  模板中直接通过rightForm.controls.right访问控件：

  <form [formGroup]="rightForm">
    <input type="text" class="form-control" id="right" required formControlName="right">
    <div [hidden]="rightForm.controls.right.valid || rightForm.controls.right.pristine" class="alert alert-danger">
      <div *ngIf="rightForm.controls.right.errors?.['required']">
        name is empty!
      </div>
    </div>
  </form>
  

• 模板引用变量
  直接在input元素上添加formControl类型的模板引用变量，无需修改组件类：

  <form [formGroup]="rightForm">
    <input type="text" class="form-control" id="right" required formControlName="right" #rightCtrl="formControl">
    <div [hidden]="rightCtrl.valid || rightCtrl.pristine" class="alert alert-danger">
      <div *ngIf="rightCtrl.errors?.['required']">
        name is empty!
      </div>
    </div>
  </form>
  

  模板中通过rightCtrl即可直接访问该控件的属性和方法。

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