如何让表格行随Mat-Form错误提示显隐自动调整尺寸？

问题分析 #

用表格布局Angular Material表单时，触发必填字段错误提示后，错误文本会和下方控件重叠，核心原因是表格或单元格的高度限制导致行无法自适应错误提示高度，加上mat-form-field的布局特性被表格默认样式干扰。

解决方案 #

1. 移除表格固定高度限制 #

原代码中表格设置的style="height: 100%"会强制表格占满父容器高度，限制行的自适应能力，直接移除该设置。

2. 调整表格单元格样式 #

给表格单元格设置vertical-align: top，确保内容从顶部开始布局，允许单元格高度随内容自动撑开。

3. 优化mat-form-field布局 #

将mat-form-field设为块级元素，避免被表格单元格的内联布局限制，同时保留subscriptSizing="dynamic"让控件根据提示文本自动调整高度。

修改后的代码示例 #

<table>
  <tr>
    <td style="vertical-align: top;">
      First Name
    </td>
    <td style="vertical-align: top;">
      <mat-form-field
        appearance="outline"
        subscriptSizing="dynamic"
        style="display: block;"
      >
        <input matInput [formControlName]="control.name" />
        <mat-error
          *ngIf="this.myForm.get(control.name)?.hasError('required')"
        >
          {{ control.label }} is required
        </mat-error>
      </mat-form-field>
    </td>
  </tr>
  <!-- 下方示例行 -->
  <tr>
    <td>
      Last Name
    </td>
    <td>
      <mat-form-field
        appearance="outline"
        subscriptSizing="dynamic"
        style="display: block;"
      >
        <input matInput [formControlName]="anotherControl.name" />
      </mat-form-field>
    </td>
  </tr>
</table>

额外优化（可选） #

如果仍有样式冲突，可在全局CSS或组件样式中添加：

table td {
  vertical-align: top !important;
}

mat-form-field {
  width: 100%;
  display: block;
}

以上调整后，表格行会根据错误提示的高度自动增高，彻底避免和下方控件重叠。

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