Angular Material 2：修复多行错误消息

Question

我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片：

这是代码：

<md-error *ngIf="password.touched && password.invalid">
          <span *ngIf="password.errors.required">
                {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}}
          </span>
          <span *ngIf="password.errors.minlength || password.errors.maxlength">
                {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}}
          </span>
          <span *ngIf="password.errors.pattern">
                {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}}
          </span>
</md-error>

我通过阅读 github 了解到，这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗？

Answer 1

问题是类为

.mat-form-field-subscript-wrapper

的元素是

position: absolute

，所以它不占用实际空间。

按照 xumepadismal 在 github 上关于此问题的建议，您可以添加此 scss 作为解决我的问题的解决方法：

// Workaround for https://github.com/angular/material2/issues/4580.
mat-form-field .mat-form-field {
  &-underline {
    position: relative;
    bottom: auto;
  }
  &-subscript-wrapper {
    position: static;
  }
}

它会转换静态 div 中的

.mat-form-field-subscript-wrapper

 节点，并将 

.mat-form-field-unterline

 重新定位在输入字段之后。

Answer 2

正如材料 15 中

在 github 讨论中提到的，可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为，您必须使用以下选项更新 angular.module.ts 提供程序：

providers: [
{
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
      subscriptSizing: 'dynamic'
      }
    }
]

这也可以在

材料文档

中找到

Answer 3

使用 Tailwind CSS，这个解决方案对我来说适用于最新的 Angular 17：

.mat-mdc-form-field {
  @apply w-full self-start;

  .mat-mdc-form-field-subscript-wrapper {
    @apply flex;

    .mat-mdc-form-field-error-wrapper {
      @apply static;
    }
  }
}

Answer 4

它对我有用。