Angular响应式表单：如何用模板变量简化校验错误判断？

好消息！新版本的Angular完全支持你想要的这种简化写法，不用再写冗长的formDir.form.controls.username.touched && formDir.form.controls.username.invalid代码，也不需要额外为每个控件单独创建实例——用法和模板驱动表单里的#x="ngModel"几乎一模一样！

核心实现思路 #

Angular的FormControlName（配合formGroup使用）和FormControlDirective（直接绑定formControl实例）都导出了ngControl变量，这个变量指向对应的AbstractControl实例，你可以通过模板变量直接访问它的touched、invalid、errors等状态。

具体代码示例 #

1. 结合formGroup和formControlName的场景

组件类中的响应式表单定义：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
})
export class UserFormComponent implements OnInit {
  userForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.userForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }
}

模板中的简化写法：

<form [formGroup]="userForm">
  <!-- 用户名输入框，添加模板变量绑定到ngControl -->
  <input type="text" formControlName="username" #username="ngControl">
  
  <!-- 简化的错误提示判断 -->
  <div *ngIf="username.touched && username.invalid" class="error-message">
    <span *ngIf="username.errors?.required">用户名不能为空</span>
    <span *ngIf="username.errors?.minlength">用户名至少需要3个字符</span>
  </div>

  <!-- 邮箱输入框同理 -->
  <input type="email" formControlName="email" #email="ngControl">
  <div *ngIf="email.touched && email.invalid" class="error-message">
    <span *ngIf="email.errors?.required">邮箱不能为空</span>
    <span *ngIf="email.errors?.email">请输入有效的邮箱地址</span>
  </div>
</form>

2. 直接绑定FormControl实例的场景

如果你的表单是单个控件（或不使用formGroup），同样可以用这个方法：
组件类定义：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-single-control',
  templateUrl: './single-control.component.html',
})
export class SingleControlComponent {
  usernameControl = new FormControl('', [Validators.required, Validators.minLength(3)]);
}

模板写法：

<input type="text" [formControl]="usernameControl" #username="ngControl">
<div *ngIf="username.touched && username.invalid">
  <span *ngIf="username.errors?.required">用户名不能为空</span>
</div>

兼容性说明 #

这种写法从Angular 6+就已经支持，目前Angular 15、16、17等新版本都完全兼容，官方也推荐这种方式来简化响应式表单的模板代码，避免重复书写冗长的表单控件路径。

内容的提问来源于stack exchange，提问作者Abolfazl Davoodi Shandiz