Angular 18中Mat-Form-Field控件初始CSS未加载点击后恢复问题

问题现象 #

打开Angular Material对话框后，mat-form-field等表单控件未加载Material CSS样式，呈现原生HTML输入框样式；点击文本框获得焦点后，样式才会正常应用（包括轮廓效果、标签浮动等）。

初始状态说明 #

对话框启动后，表单控件无Material样式，输入框为原生样式，标签未正确浮动到输入框上方。

点击后状态说明 #

点击文本框后，Material的轮廓样式、标签浮动效果正常显示。

对话框组件HTML代码 #

<h2 mat-dialog-title>Add Bank Branch</h2>
<form>
  <div class="content">
    <mat-dialog-content>
      <div class="row-cols-1">
        <mat-form-field appearance="outline">
          <mat-label>Branch Address</mat-label>
          <input name="BranchAddress" matInput formControlName="BranchAddress"/>
        </mat-form-field>
      </div>
      <mat-form-field appearance="outline">
        <mat-label>IFSC Code</mat-label>
        <input name="IFSCCode" matInput formControlName="IFSCCode" />
      </mat-form-field>

      <mat-form-field>
        <mat-label>MICR Code</mat-label>
        <input name="MICRCode" matInput formControlName="MICRCode" />
      </mat-form-field>
    </mat-dialog-content>
  </div>
  <mat-dialog-actions>
    <button mat-button type="button">No Thanks</button>
    <button style="padding-left: 10px"
      color="primary"
      mat-raised-button
      mat-button
      type="submit"
      cdkFocusInitial >
      <mat-icon>add_circle</mat-icon>
      Save
    </button>
  </mat-dialog-actions>
</form>

对话框组件TS代码 #

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule, MatIconButton } from '@angular/material/button';
import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-add-branch',
  standalone: true,
  imports: [MatFormFieldModule,
    MatInputModule,
    FormsModule,
    MatButtonModule,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
    ReactiveFormsModule,
    MatIcon,
    MatIconButton
  ],
  templateUrl: './add-branch.component.html',
  styleUrl: './add-branch.component.css'
})
export class AddBranchComponent implements OnInit {

  branchForm!: FormGroup;
  constructor(private _fb: FormBuilder) {}
  ngOnInit(): void {
    this.branchForm = this._fb.group({
      BranchAddress: this._fb.control('', [Validators.required, Validators.maxLength(50)]),
      IFSCCode: this._fb.control('', [Validators.required, Validators.maxLength(10)]),
      MICRCode: this._fb.control('', [Validators.required, Validators.maxLength(10)])
    });
  }
  AddNewBranch() {

  }
}

解决方案 #

1. 绑定表单与FormGroup #

HTML中的<form>未绑定formGroup，导致Angular无法识别表单控件状态，影响Material样式初始化。修改表单标签：

<form [formGroup]="branchForm">

2. 强制触发变更检测 #

在组件初始化完成后手动触发变更检测，确保样式正确渲染：

import { ChangeDetectorRef } from '@angular/core';

// 注入ChangeDetectorRef
constructor(private _fb: FormBuilder, private cdr: ChangeDetectorRef) {}

ngAfterViewInit(): void {
  this.cdr.detectChanges();
}

3. 检查全局主题配置 #

确保全局样式文件（如styles.css）中正确导入Angular Material主题：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

自定义主题需确保配置正确且全局导入。

4. 移除重复按钮指令 #

保存按钮同时使用mat-raised-button和mat-button会导致样式冲突，保留一个即可：

<button style="padding-left: 10px"
  color="primary"
  mat-raised-button
  type="submit"
  cdkFocusInitial >
  <mat-icon>add_circle</mat-icon>
  Save
</button>

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