如何实现Angular中mat-label与input并排显示且表单为纵向布局

有两种可实现label与input并排、表单整体纵向布局的方案，优先推荐第二种，无需修改Angular Material组件内部样式，兼容性和可维护性更强。

方案1：保留现有HTML结构，修改组件内部样式 #

你当前代码不生效的原因是flex布局只加在了外层.form-nom容器，没有作用到mat-form-field的内部节点，默认mat-form-field的内部布局为label垂直排列在输入框上方。
修改后的CSS如下：

form {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 控制多个表单项之间的纵向间距 */
}

.form-nom {
  display: flex;
  align-items: center;
}

/* 修改mat-form-field内部布局，::ng-deep用于穿透组件样式封装 */
::ng-deep .form-nom .mat-form-field-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
::ng-deep .form-nom .mat-form-field-label-wrapper {
  position: static;
  width: fit-content;
  padding: 0;
}
::ng-deep .form-nom .mat-form-field-flex {
  flex: 1;
}

如果不想使用::ng-deep，可以在组件的@Component配置中添加encapsulation: ViewEncapsulation.None，注意给表单项加唯一类名避免全局样式污染。

方案2：将label移出mat-form-field（更推荐） #

把mat-label放到mat-form-field外部，直接控制外层布局即可，无需修改组件内部样式：

修改后的HTML #

<form [formGroup]="form">
  <!-- 单个表单项，所有表单项结构一致，自动纵向排列 -->
  <div class="form-item">
    <label class="form-label">Nom</label>
    <mat-form-field appearance="legacy" class="form-input-wrap">
      <input matInput formControlName="nom">
    </mat-form-field>
  </div>
  <!-- 新增其他表单项示例 -->
  <div class="form-item">
    <label class="form-label">年龄</label>
    <mat-form-field appearance="legacy" class="form-input-wrap">
      <input matInput formControlName="age">
    </mat-form-field>
  </div>
</form>

配套CSS #

form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-label {
  width: 80px; /* 统一设置所有标签宽度，对齐更美观 */
  flex-shrink: 0;
}

.form-input-wrap {
  flex: 1; /* 输入框占满剩余宽度 */
}

注意事项 #

• 原代码中输入框绑定的formControl属性使用错误，响应式表单绑定需改为formControlName
• 若需要调整标签和输入框的间距，修改.form-item的gap属性即可
• 所有新增表单项复用.form-item结构即可保持表单整体纵向布局

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