Angular 17与Angular Material 17.3.1：mat-form-field焦点/失焦事件异常

现有代码的问题 #

1. 参数缺失导致逻辑错误：inActive()方法未声明$event参数，但内部却使用了该变量，触发blur事件时会因变量未定义导致isFieldFocused无法正确更新。
2. 冗余逻辑：click()方法里的if ($event)判断完全多余，focus事件触发时必然会传入事件对象，直接赋值即可。

修正后的代码 #

HTML文件 #

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="outline">
    <mat-label *ngIf="isFieldFocused">Selected Food</mat-label>
    <input
      matInput
      placeholder="Select Menu"
      (focus)="onFocus()"
      (blur)="onBlur()"
    />
  </mat-form-field>
</form>

TypeScript文件 #

export class InputOverviewExample {
  isFieldFocused: boolean = false;

  onFocus() {
    this.isFieldFocused = true;
  }

  onBlur() {
    this.isFieldFocused = false;
  }
}

更优雅的替代方案（利用Angular Material原生特性） #

Angular Material的mat-form-field本身支持相关交互，无需手动监听focus/blur事件。如果要严格实现「初始显示placeholder，聚焦时显示label」的需求，可结合CSS控制：

优化代码 #

HTML文件

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="outline">
    <mat-label>Selected Food</mat-label>
    <input
      matInput
      placeholder="Select Menu"
    />
  </mat-form-field>
</form>

全局/组件CSS

/* 初始状态隐藏label */
mat-form-field:not(.mat-focused) mat-label {
  display: none;
}
/* 聚焦时显示label */
mat-form-field.mat-focused mat-label {
  display: block;
}

这种方式无需在组件内维护状态变量，直接利用Angular Material内置的状态类实现效果。

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