升级到 Angular Material 16 后，Mat-form-field 标签不浮动

Question

我最近将一个项目从 Angular 15 升级到 Angular 16。到目前为止，逻辑工作正常，但是

mat-form-field

面临一些问题，其中标签不浮动。相同的代码在 v12 中运行良好。 Angular 自动设置依赖项以使用旧版，但组件仍然会损坏。

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"
                    ]
                }
            }
        }
    }
}

下面是我导入的材质依赖项 -

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>

输出：

预期结果：升级后标签应该浮动，表单字段也缩小了一点。它应该看起来像这样 -

示例在这里 - v12 字段

Answer 1

在 Angular Material 16 中，mat-form-field 标签的行为已更新，以符合 Material Design 3 规范。此更新引入了新的标签样式机制，可能会导致标签在升级后无法按预期浮动。您可以尝试以下方法：-

1. 确保设置了外观属性。 默认外观是“填充”，尝试将其设置为轮廓。

2. 设置“floatLabel”属性