Angular Material中matInput必填项页面加载后不触发无效状态的问题

先看你提供的示例代码：

<mat-form-field class="example-form-field">
      <mat-label>Clearable input</mat-label>
      <input matInput type="text" [(ngModel)]="value" required>
      <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
        <mat-icon>close</mat-icon>
      </button>
</mat-form-field>

为什么仅在用户交互后才标记字段无效？ #

Angular 默认的表单验证逻辑是从用户体验角度出发的：页面刚加载时就给用户展示一堆红色错误提示，很容易让用户产生焦虑感，甚至误以为操作出错了。只有当用户和字段发生交互（比如聚焦后失焦），才触发验证反馈，这种逻辑更贴合用户的操作流程——用户先看到干净的表单，在尝试输入或跳过字段后，再收到针对性的验证提示，体验更友好。

如何在页面加载后立即标记字段为无效？ #

针对你用的模板驱动表单（ngModel），可以通过手动触发控件的验证状态来实现，有两种常用方式：

方式一：手动标记控件为已触摸并更新验证状态 #

1. 给模板中的 input 加上模板引用变量，同时确保表单被 ngForm 包裹：

<form #form="ngForm">
  <mat-form-field class="example-form-field">
    <mat-label>Clearable input</mat-label>
    <input matInput type="text" [(ngModel)]="value" required #inputCtrl="ngModel">
    <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</form>

2. 在组件类中，通过 ViewChild 获取该控件的 NgModel 实例，在视图初始化完成后手动触发验证：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  value = '';
  @ViewChild('inputCtrl') inputModel!: NgModel;

  ngAfterViewInit(): void {
    // 标记控件为已触摸状态，触发Angular的验证反馈
    this.inputModel.control.markAsTouched();
    // 更新控件的验证状态
    this.inputModel.control.updateValueAndValidity();
  }
}

方式二：改用响应式表单（FormGroup） #

响应式表单能更灵活地控制验证状态，初始化时直接标记控件为已触摸即可：

1. 模板部分：

<mat-form-field class="example-form-field">
  <mat-label>Clearable input</mat-label>
  <input matInput type="text" formControlName="value">
  <button *ngIf="form.get('value')?.value" matSuffix mat-icon-button aria-label="Clear" (click)="form.get('value')?.setValue('')">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

2. 组件类部分：

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

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

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      value: ['', Validators.required]
    });

    // 初始化时标记控件为已触摸，直接显示验证错误
    this.form.get('value')?.markAsTouched();
  }
}

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