角度材料2:修复多行错误消息 [英] Angular Material 2: Fix for Multiline Error messages

问题描述

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

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 *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材料中的一个错误.有没有人通过执行自定义解决方法来解决此问题?

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?

推荐答案

问题是类别为 .mat-form-field-subscript-wrapper 的元素为 position:absolute ，因此它不会占用实际空间.

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

如在github上有关此问题的建议"https://github.com/xumepadismal" rel ="noreferrer"> xumepadismal ，您可以将此scss添加为解决我的问题的解决方法:

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

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

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.

这篇关于角度材料2:修复多行错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！