angularangular2-formsangular-material2

Angular Material 2: Fix for Multiline Error messages


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:

md-error-multiline-bug

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?


Solution

  • The problem is that the element with class .mat-form-field-subscript-wrapper is position: absolute, so it's not occupying real space.

    As suggested on this issue on github by xumepadismal, you can add this scss as workaround that solved my problem:

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

    It transforms the .mat-form-field-subscript-wrapper node in a static div, and repositionate the .mat-form-field-unterline just after the input field.