Angular 15中mat-form-field输入框required属性失效问题咨询

问题原因 #

你使用的是Reactive Forms（通过[formGroup]绑定），在Angular 14及更高版本中，Reactive Forms不再自动将原生HTML的required属性关联到FormControl的验证规则。而Angular 13及之前版本存在隐式兼容逻辑，会自动把原生required转为表单验证器，升级到15后这个逻辑被移除，导致原生required属性不再触发表单验证。

Reactive Forms的设计原则是优先使用代码层面的验证器（Validators），而非原生HTML属性，这样能更好地控制验证逻辑和状态。

解决方案 #

方案1：使用Reactive Forms的验证器（推荐） #

在组件类的FormControl定义中显式添加Validators.required，并在模板中绑定formControlName：

组件类代码

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  categoryForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.categoryForm = this.fb.group({
      name: ['', Validators.required] // 添加必填验证规则
    });
  }
}

模板代码修改

<h2 mat-dialog-title>Add new category</h2>
<mat-dialog-content>
    <form [formGroup]="categoryForm">
        <div class="category-container">
            <mat-form-field>
                <input matInput placeholder="Name" formControlName="name" />
                <!-- 可选：添加错误提示 -->
                <mat-error *ngIf="categoryForm.get('name')?.hasError('required') && categoryForm.get('name')?.touched">
                    Name is required
                </mat-error>
            </mat-form-field>
        </div>
    </form>
</mat-dialog-content>

设置完成后，mat-form-field会根据FormControl的状态自动显示验证错误，效果和Angular 13一致。

方案2：改用模板驱动表单 #

如果你不需要Reactive Forms的特性，可以切换为模板驱动表单，保留原生required属性：

模块导入（确保模块中导入FormsModule）

import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    FormsModule, // 导入模板驱动表单依赖
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule
  ]
})
export class YourModule {}

模板代码修改

<h2 mat-dialog-title>Add new category</h2>
<mat-dialog-content>
    <form #categoryForm="ngForm">
        <div class="category-container">
            <mat-form-field>
                <input matInput placeholder="Name" name="name" required [(ngModel)]="categoryName" />
                <mat-error *ngIf="categoryForm.controls['name']?.invalid && categoryForm.controls['name']?.touched">
                    Name is required
                </mat-error>
            </mat-form-field>
        </div>
    </form>
</mat-dialog-content>

组件类添加变量

export class YourComponent {
  categoryName: string = '';
}

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