Angular Material：自定义无标签无提示超紧凑form-field遇密度报错

环境信息 #

• Angular: 15.0.4
• CDK/Material: 15.0.3
• 浏览器：Safari 16.2
• 操作系统：macOS

问题描述 #

我想要自定义无标签无提示的超紧凑form-field，目前.my-mat-form-field-density-5能正常工作，但.my-mat-form-field-density-8无法生效，抛出错误：

SassError: "mdc-density: height must be between 36px and 56px (inclusive), but received 24px."

相关代码 #

@use '@angular/material' as mat;

@mixin my-form-field-density($density) {
    $field-typography: mat.define-typography-config(
        $body-1: mat.define-typography-level(12px, 24px, 400),
    );
    @include mat.typography-level($field-typography, 'body-1');
    @include mat.form-field-density($density);
    margin-bottom: -18px;   // 保留底部8px间距
}

.my-mat-form-field-density-5 {
    @include my-form-field-density(-5);
}

.my-mat-form-field-density-8 {
    @include my-form-field-density(-8);
}

解决方案 #

Angular Material的form-field-density混入底层依赖MDC的密度规范，它强制要求表单字段高度在36px到56px之间。当你传入密度值-8时，计算出的高度是24px，超出了允许范围，所以触发报错。

要实现超紧凑的无标签表单字段，不能直接用官方的密度混入，得手动覆盖样式绕过限制：

修改后的Sass代码：

@use '@angular/material' as mat;

@mixin my-form-field-density($density) {
  $field-typography: mat.define-typography-config(
    $body-1: mat.define-typography-level(12px, 24px, 400),
  );
  @include mat.typography-level($field-typography, 'body-1');
  
  // 手动调整内边距和高度，替代官方density混入
  .mat-mdc-form-field-infix {
    padding: 6px 0;
    min-height: 24px;
  }
  
  // 调整输入框内边距，避免内容错位
  .mat-mdc-input-element {
    padding: 0 8px;
  }
  
  margin-bottom: -18px; // 保留底部8px间距
}

.my-mat-form-field-density-5 {
  @include my-form-field-density(-5);
}

.my-mat-form-field-density-8 {
  @include my-form-field-density(-8);
}

如果你的表单确实不需要标签和提示文本，还可以加上以下样式进一步压缩空间：

.my-mat-form-field-density-8 .mat-mdc-form-field-label-wrapper {
  display: none;
}

注意点 #

• 手动调整样式时要保证输入框的可点击区域足够，别影响用户操作
• 不同浏览器可能需要微调内边距，确保视觉效果一致

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