Angular Material 2: Fix for Multiline Error messages

Question

I'm using angular material 2 inside my angular application. I'm experiencing a problem when my form input field error messages are more than one line. Here is the photo:

Here is the code:

<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>

I've understood by reading github, that it is a bug in angular 2 material. Did anybody manage to solve this issue by doing a custom workaround?

Answer 1

问题是带有 class 的元素.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;
  }
}

它.mat-form-field-subscript-wrapper在静态 div 中转换节点，并.mat-form-field-unterline在输入字段之后重新定位。