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:



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?

Continue reading...