Angular校验：输入内容修正后Mat-Error错误提示不消失问题

AI 小北

2026-9-29

问题根因

你当前mat-error的判断条件写法错误，hasError是表单校验方法而非属性，需要传入具体错误类型才能生效，同时也没有绑定表单控件的状态位触发视图更新
手动输入日期内容时，默认不会自动触发Angular表单的校验更新逻辑，只有通过日历控件选中日期并点击Apply按钮后才会同步值并触发校验
你当前给min/max属性绑定的是ISO字符串格式的日期，和Angular Material日期适配器要求的日期类型不匹配，也会导致校验逻辑异常

修复步骤

1. 修正HTML模板代码

调整mat-error的显示条件，同时给输入框增加失焦事件主动触发校验：

<mat-form-field [appearance]="appearance">
  <input
    matInput
    class="om-text-input"
    type="text"
    placeholder="DD.MM.YYYY"
    [required]="isRequired"
    [min]="minDate"
    [max]="maxDate"
    (focus)="Datepicker.open()"
    [matDatepicker]="Datepicker"
    #input="ngModel"
    [(ngModel)]="date"
    <!-- 失焦时主动触发校验更新 -->
    (blur)="input.control.updateValueAndValidity()"
  />
  <mat-datepicker-toggle matSuffix [for]="Datepicker">
    <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker #Datepicker>
    <mat-datepicker-actions>
      <button mat-button matDatepickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
    </mat-datepicker-actions>
  </mat-datepicker>
  <!-- 修正错误判断条件 -->
  <mat-error class="om-error" *ngIf="input.invalid && (input.dirty || input.touched)">Invalid date</mat-error>
</mat-form-field>

2. 修正组件中的日期格式

你当前用Luxon生成的minDate和maxDate是字符串类型，需要改为和日期适配器匹配的类型，如果你用的是默认JS日期适配器，直接转成Date对象即可：

export class DatePickerComponent {
      date: Date = new Date();
      // 去掉toISODate()，转成JS Date对象适配默认日期适配器
      minDate = DateTime.now().minus({ days: 365 }).toJSDate();
      maxDate = DateTime.now().plus({ days: 365 }).toJSDate();
    
      @Input()
      isRequired = false;

      @Input()
      appearance: Appearance = Appearance.outline;
}

3. 补充模块配置（未配置时需要添加）

确保你的模块中导入了正确的日期适配模块，如果你用Luxon作为日期处理库，需要导入MatLuxonDateModule才能正确解析DE区域的DD.MM.YYYY格式日期：

import { MatLuxonDateModule } from '@angular/material-luxon-adapter';

@NgModule({
  imports: [
    // ...其他依赖导入
    MatLuxonDateModule
  ],
  providers: [{ provide: MAT_DATE_LOCALE, useValue: 'DE-EU' }],
})
export class YourModule { }

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