Angular如何在模板驱动表单中让matInput加载时默认标记无效

• Angular Material 表单控件默认仅在控件处于touched（失焦）状态或表单提交时，才会渲染校验失败的样式，并非校验规则未生效。
• 常规实现容易缺失两个关键逻辑：未主动触发初始错误状态、未处理「任意字段填充后永久取消必填校验」的业务规则。

1. 补全组件侧基础逻辑 #

首先在组件类中定义状态标记、校验判断方法，匹配业务规则：

import { Component } from '@angular/core';

@Component({
  // 你的组件配置
})
export class YourComponent {
  // 绑定的数据对象，初始默认两个字段为空即可
  myData = {
    fieldA: null,
    fieldB: null
  };

  // 标记是否曾经填充过任意一个字段
  hasEverFilled = false;

  // 校验规则：判断当前是否需要触发必填校验
  isFilled(data: {fieldA: any, fieldB: any}): boolean {
    // 只要曾经填过任意字段，永久取消必填校验
    if (this.hasEverFilled) return false;
    // 初始状态两个字段都为空时，必填规则生效
    return !data?.fieldA && !data?.fieldB;
  }

  // 监听输入变化，更新填充标记
  onValueChange() {
    if (this.myData.fieldA || this.myData.fieldB) {
      this.hasEverFilled = true;
    }
  }
}

2. 选择一种方式实现初始加载即显示错误 #

方式一：自定义错误状态匹配器（推荐，无需手动操作控件状态） #

Angular Material支持通过ErrorStateMatcher自定义错误显示规则，直接让控件只要校验不通过就显示错误，无需等待touched状态：

1. 在组件类中定义自定义匹配器并实例化：

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

// 定义无需等待touched、立即显示错误的匹配器
class ImmediateShowErrorMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid);
  }
}

// 在组件类中添加匹配器实例
errorMatcher = new ImmediateShowErrorMatcher();

2. 修改模板，给两个输入框补全必要属性、绑定匹配器和值变化事件：

<!-- fieldA输入框 -->
<mat-form-field appearance="outline" class="width-small">
  <input 
    matInput
    name="fieldA"
    [required]="isFilled(myData)"
    [(ngModel)]="myData.fieldA"
    (ngModelChange)="onValueChange()"
    [errorStateMatcher]="errorMatcher"
  >
  <mat-error *ngIf="isFilled(myData)">两个字段至少填写一个</mat-error>
</mat-form-field>

<!-- fieldB输入框 -->
<mat-form-field appearance="outline" class="width-small">
  <input 
    matInput
    name="fieldB"
    [required]="isFilled(myData)"
    [(ngModel)]="myData.fieldB"
    (ngModelChange)="onValueChange()"
    [errorStateMatcher]="errorMatcher"
  >
  <mat-error *ngIf="isFilled(myData)">两个字段至少填写一个</mat-error>
</mat-form-field>

注意：使用ngModel必须给控件加name属性，否则Angular表单会抛出运行时异常。

方式二：视图加载后手动标记控件状态 #

如果不想自定义匹配器，可以在视图初始化完成后，直接拿到两个ngModel控件实例，手动标记为touched状态触发错误显示：

1. 先给模板中两个输入框加模板引用变量，同时补全name和值变化事件（无需加errorStateMatcher）：

<input 
  matInput
  name="fieldA"
  #fieldAInst="ngModel"
  [required]="isFilled(myData)"
  [(ngModel)]="myData.fieldA"
  (ngModelChange)="onValueChange()"
>
<!-- fieldB同理添加#fieldBInst="ngModel" -->

2. 在组件类中通过@ViewChild拿到控件实例，在ngAfterViewInit生命周期中触发状态更新：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgModel } from '@angular/forms';

// 组件类内
@ViewChild('fieldAInst') fieldAInst: NgModel;
@ViewChild('fieldBInst') fieldBInst: NgModel;

ngAfterViewInit(): void {
  // 加setTimeout避免变更检测周期冲突
  setTimeout(() => {
    // 标记为已触碰，触发错误样式显示
    this.fieldAInst.control.markAsTouched();
    this.fieldBInst.control.markAsTouched();
    // 手动触发一次校验更新
    this.fieldAInst.control.updateValueAndValidity();
    this.fieldBInst.control.updateValueAndValidity();
  });
}

• 组件初始加载：两个字段均为空，必填规则生效，直接显示红框和错误提示，无需点击失焦
• 任意一个输入框输入内容：hasEverFilled标记变为true，两个输入框的必填校验失效，错误样式消失
• 后续即使将已填充的内容清空，回到两个字段都为空的状态：因为hasEverFilled已经为true，不会再触发必填校验，完全匹配需求

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