如何实现Angular Material mat-form-field标签居左、输入框居右的布局？

要实现mat-label居左、matInput居右的效果，Angular Material默认没有提供现成配置，不过我们可以通过自定义CSS结合Flex布局轻松搞定。另外注意下你代码里的小细节：formControl应该改成formControlName（如果是响应式表单场景），不然会出现表单绑定错误哦。

修改后的代码示例 #

HTML部分

<div class="container">
  <mat-form-field appearance="legacy" class="label-left-input-right">
    <mat-label>Nom</mat-label>
    <input matInput formControlName="nom">
  </mat-form-field>
</div>

CSS部分（可放在全局样式文件或组件内样式中）

/* 给自定义表单字段设置Flex横向布局 */
.label-left-input-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* 也可根据需求设置固定宽度，比如400px */
}

/* 控制标签的间距与换行行为 */
.label-left-input-right mat-label {
  flex: 0 0 auto;
  margin-right: 1.5rem; /* 标签和输入框的间距，可按需调整 */
  white-space: nowrap; /* 避免标签过长换行 */
}

/* 让输入框容器占满剩余空间并右对齐 */
.label-left-input-right .mat-input-wrapper {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

/* 可选：让输入的文本也默认右对齐 */
.label-left-input-right input.mat-input-element {
  text-align: right;
}

实现原理 #

• 给mat-form-field添加自定义类后，用Flex布局让内部元素横向排列，justify-content: space-between确保标签和输入框分别靠向左右两端。
• 通过flex属性分配空间：标签固定宽度不收缩，输入框容器占满剩余空间。
• 调整输入框容器的justify-content: flex-end，让输入框本身靠右显示。

如果你的表单使用了其他appearance（比如outline或fill），只需微调CSS选择器（比如针对.mat-form-field-outline这类元素）就能适配，核心思路还是用Flex布局重排内部元素。

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