升级Angular Material 16后mat-form-field标签无法浮动问题

将项目从Angular 15升级至Angular 16后，业务逻辑运行正常，但遇到mat-form-field标签无法浮动的问题。相同代码在Angular 12中可正常运行，已配置使用Angular Material的Legacy依赖，但组件表现仍异常。

当前配置与代码 #

angular.json样式配置 #

{
    "projects": {
        "architect": {
            "build": {
                "options": {
                    "styles": [
                        "@angular/material/prebuilt-themes/indigo-pink.css",
                        "bootstrap/dist/css/bootstrap.min.css",
                        "src/styles.scss",
                        "src/assets/css/other_styles.scss"
                    ]
                }
            }
        }
    }
}

已导入的Material模块 #

import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

组件HTML代码 #

<div class="loginform-block login-bg">
  <div class="center-element loginform card">
    <div class="loginform-header">SOME CONTENT
    </div>
    <div class="loginform-content">
      <form [formGroup]="loginForm" (submit)="onSubmit()">
        <div class="mb-3">
          <mat-form-field appearance="legacy" class="w-100">
            <mat-label>Username</mat-label>
            <input autocomplete="off" matInput placeholder="Enter Username" id="username" formControlName="username"
              autoCapitalize maxlength="10" />
            <mat-error>Username Required</mat-error>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="legacy" class="w-100">
            <mat-label>Password</mat-label>
            <input [type]="passwordHide ? 'password' : 'text'" matInput placeholder="Password" id="password"
              formControlName="password" />
            <mat-icon matSuffix (click)="passwordHide = !passwordHide" class="cursor-pointer">{{
                            passwordHide ? 'visibility_off' :
                            'visibility' }}</mat-icon>
            <mat-error>Password Required</mat-error>
          </mat-form-field>
        </div>
        <div class="loginform-action mb-3">
          <button mat-raised-button color="primary" [disabled]="!loginForm.valid" class="iA-button">Login</button>
        </div>
        <div class="version-info text-center mt-2" *ngIf="version">Version: <strong
            class="current-version">{{version}}</strong></div>
      </form>
    </div>
  </div>
  <div class="clearfix"></div>
</div>

效果对比 #

当前异常效果 #

期望效果 #

标签能够正常浮动，表单域随输入内容适当收缩，与Angular Material 12中的表现一致。

排查与解决建议 #

• 确认主题样式加载优先级：确保Angular Material主题样式在所有自定义样式和第三方样式（如Bootstrap）之前加载，避免样式覆盖导致标签浮动逻辑失效。
• 检查Legacy模块导入完整性：确保未同时导入非Legacy版本的MatFormFieldModule或MatInputModule，两种模块共存会导致样式和逻辑冲突。
• 验证表单控件状态：检查loginForm中username和password控件的初始化状态，若控件从未被交互（未touched/dirty）且无初始值，可尝试在组件初始化时标记控件为touched，或设置空初始值触发标签状态变化。
• 排查自定义样式冲突：检查styles.scss和other_styles.scss中是否存在覆盖mat-form-field、mat-label、mat-input相关样式的规则，比如修改了position、transform、top等属性。
• 匹配Angular与Material版本：确保@angular/material版本与Angular核心版本完全一致（Angular 16对应@angular/material 16.x.x），版本不匹配可能导致Legacy模式兼容性问题。

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