Angular Material mat-form-field渲染异常问题求助

我在开发登录表单时使用Angular Material的mat-form-field组件，遇到以下异常：

• 页面加载时输入框无Angular Material专属样式，点击后才会渲染正常样式
• 其他Angular项目中该组件加载时样式正常
• 点击异常输入框后，失焦时输入框会消失

相关代码 #

HTML 代码 #

<mat-card-content>
    <mat-form-field appearance="outline">
        <mat-label>E-mail</mat-label>
        <input matInput formControlName="email" type="email" placeholder="Digite seu e-mail">
    </mat-form-field>
    <mat-form-field appearance="outline">
        <mat-label>Senha</mat-label>
        <input matInput formControlName="email" type="password" placeholder="Digite sua senha">
    </mat-form-field>
</mat-card-content>

TS 代码 #

export class LoginComponent implements OnInit{

  loginForm!: FormGroup;
  
  constructor(
    private formBuilder: FormBuilder
  ) {

  }
  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      senha: [null, Validators.required]
    })
  }

}

SCSS 代码 #

.login-component {
  max-width: 50%;
  min-height: 78.7%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  .login {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 68px;
    background-color: white;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .form-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;

    mat-card-header {
      margin-bottom: 24px;

      mat-card-title {
        font-size: 32px;
        font-weight: 400;
      }
    }

    mat-card-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    mat-card-actions {
      display: flex;
      flex-direction: column;
      align-items: normal;

      button {
        margin: 0 8px;
        margin-bottom: 16px;
      }
    }

    p {
      font-size: 16px;
      font-weight: 500;
    }

    a {
      cursor: pointer;

      &:active {
        color: #551A8B;
      }
    }
  }
}

AppModule 代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router';
import { GoogleMapsModule } from '@angular/google-maps';
import { MatInputModule } from '@angular/material/input';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdbAccordionModule } from 'mdb-angular-ui-kit/accordion';
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
import { MdbPopoverModule } from 'mdb-angular-ui-kit/popover';
import { MdbRadioModule } from 'mdb-angular-ui-kit/radio';
import { MdbRangeModule } from 'mdb-angular-ui-kit/range';
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
import { MdbScrollspyModule } from 'mdb-angular-ui-kit/scrollspy';
import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
import { MdbValidationModule } from 'mdb-angular-ui-kit/validation';
import { FooterComponent } from './shared/footer/footer.component';
import { ContainerComponent } from './shared/container/container.component';
import { HomepageComponent } from './pages/homepage/homepage.component';
import { LoginComponent } from './pages/login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ContainerComponent,
    HomepageComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    MatToolbarModule,
    MdbAccordionModule,
    MdbCarouselModule,
    MdbCheckboxModule,
    MdbCollapseModule,
    MdbDropdownModule,
    MdbFormsModule,
    MdbModalModule,
    MdbPopoverModule,
    MdbRadioModule,
    MdbRangeModule,
    MdbRippleModule,
    MdbScrollspyModule,
    MdbTabsModule,
    MdbTooltipModule,
    MdbValidationModule,
    RouterModule,
    GoogleMapsModule,
    AppRoutingModule,
    MatInputModule,
    ReactiveFormsModule,
    FormsModule,
    MatCardModule,
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题排查与解决方案 #

1. 修复表单控件绑定错误 #

HTML中密码输入框的formControlName绑定错误，TS里表单组定义的是senha，但HTML写成了email，这会导致控件无法正确关联表单，引发渲染异常：

<!-- 错误代码 -->
<input matInput formControlName="email" type="password" placeholder="Digite sua senha">
<!-- 修复后 -->
<input matInput formControlName="senha" type="password" placeholder="Digite sua senha">

2. 解决框架样式冲突 #

项目同时引入了Angular Material和MDB UI Kit，两者的表单样式存在冲突：

• 先尝试移除MDB的表单相关模块（MdbFormsModule、MdbValidationModule），测试是否恢复正常
• 若需保留MDB，给Angular Material的表单添加独立类名，通过更高优先级的CSS规则覆盖冲突样式

3. 验证Angular Material主题导入 #

确保全局样式文件（如styles.scss）中导入了Angular Material的预构建主题：

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

4. 调整可能干扰的CSS属性 #

.login-component中的overflow-y: hidden可能导致输入框失焦时被隐藏，尝试移除或修改该属性：

.login-component {
  // 移除或调整该属性
  // overflow-y: hidden;
}

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