使用Angular与FormBuilder做必填表单校验，错误提示不显示如何解决？

API 探路者

2026-9-24

问题原因及修复方案

1. FormControl绑定属性拼写错误

Angular响应式表单的控件绑定属性为驼峰格式formControlName，你的代码中写为全小写的formcontrolname，导致输入框和对应的FormControl没有完成关联，校验逻辑无法生效。

2. 错误提示未使用Angular Material官方组件

mat-form-field对自定义的错误提示div存在默认的显示逻辑限制，使用官方提供的mat-error组件会自动适配表单控件的校验状态，无需额外编写显隐的状态判断。

3. 提交时未手动触发表单校验

你当前的错误显隐逻辑依赖控件的touched/dirty状态，如果用户未操作输入框直接提交，两个状态都为false，错误提示不会显示，需要在提交逻辑中手动标记所有控件为已触碰状态。

修正后代码

模板代码

<mat-form-field class="full-width">
     <mat-label>Alert</mat-label>
     <input matInput id="name" formControlName="alert" placeholder="Ex. Red" accept=".pdf">
     <mat-error *ngIf="alert.errors?.['required']">
          Name is required
     </mat-error>
</mat-form-field>

组件提交方法代码

public uploadFile() {
  // 标记全表单控件为已触碰，触发所有校验提示
  this.uploadFileForm.markAllAsTouched();
  // 校验通过后再提交数据
  if (this.uploadFileForm.valid) {
    const outputValue: ReportUploadOutput = this.uploadFileForm.value;
    this.reportUploadForm.emit(outputValue);
  }
}