Angular Material 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 上的这个问题 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.
这篇关于Angular Material 2:修复多行错误消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!