Angular Material中mat-form-field超三个未获焦点不显示问题

我用Angular Material开发注册表单时碰到个问题：当<mat-form-field>数量超过3个后，第4个及以后的输入框在未获得焦点前完全看不到，只有点击获焦后才会显示出输入框的样式。

实现代码： #

<div class="form">
  <h2 class="form__title">Регистрация</h2>
  <form [formGroup]="registerForm">
    <mat-form-field>
      <mat-label>Введите телефон</mat-label>
      <input formControlName="userPhone" required matInput>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Введите email</mat-label>
      <input formControlName="userEmail" type="email" required matInput>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Введите пароль</mat-label>
      <input type="password" formControlName="userPassword" required matInput>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Test</mat-label>
      <input required matInput>
    </mat-form-field>
    <button (click)="onSubmit()" mat-raised-button class="form__button" color="primary">Зарегистрироваться</button>
    <div class="form__bottom">
      Уже есть аккаунт? <a routerLink="/auth/login">Войти</a>
    </div>
  </form>
</div>

问题截图： #

原因及解决办法 #

1. 未绑定表单控件（最可能的原因）

第四个输入框没有设置formControlName，Angular Material的表单字段依赖表单控件的状态完成样式渲染，缺少绑定会导致初始渲染异常。

解决步骤：

• 在组件的FormGroup中添加对应控件：

// 组件.ts文件
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class RegisterComponent {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registerForm = this.fb.group({
      userPhone: ['', Validators.required],
      userEmail: ['', [Validators.required, Validators.email]],
      userPassword: ['', Validators.required],
      testField: ['', Validators.required] // 新增第四个字段的表单控件
    });
  }

  onSubmit() {
    // 提交逻辑
  }
}

• 给模板中的第四个输入框添加formControlName：

<mat-form-field>
  <mat-label>Test</mat-label>
  <input required matInput formControlName="testField">
</mat-form-field>

2. 自定义CSS样式限制

检查.form类是否设置了固定高度、溢出隐藏等限制样式，比如：

.form {
  height: 400px;
  overflow: hidden;
}

这类设置会让超出高度的内容被隐藏，只有输入框获焦时样式变化撑开容器才会显示。

解决步骤：
将固定高度改为最小高度，或移除溢出隐藏设置：

.form {
  min-height: 400px;
  /* 移除overflow: hidden; 或改为overflow: visible; */
}

额外检查点

• 确认模块中已正确导入MatFormFieldModule和MatInputModule，未导入会导致表单字段渲染异常。
• 打开浏览器控制台查看是否有报错（如“找不到formControl”），这类提示可直接定位问题。

内容的提问来源于stack exchange，提问作者Никита