Angular Material 2：修复多行错误消息

Posted 2023-03-13

【中文标题】Angular Material 2：修复多行错误消息

【英文标题】：Angular Material 2: Fix for Multiline Error messages

【发布时间】：2018-02-18 05:34:39

【问题描述】：

我在我的 Angular 应用程序中使用了 Angular Material 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片：

代码如下：

<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 材料中的错误。是否有人通过自定义解决方法设法解决了这个问题？

【问题讨论】：

也许尝试使用@angular/forms？

@Edric 你是什么意思？

你可以为你的formGroup添加代码sn-p

@RohanFating 这是 jsfiddle：jsfiddle.net/xodreuzc/#&togetherjs=NBtMjnh2lK

将固定高度和溢出隐藏工作？ plunker没有帮助:(

【参考方案1】：

问题是.mat-form-field-subscript-wrapper类的元素是position: absolute，所以它没有占用实际空间。

根据xumepadismal 的建议on this issue on 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 重新定位在输入字段之后。

【讨论】：

我最终在&-subscript-wrapper 中添加了一个overflow: visible;，因为消息底部的g 字符被切断了。

【参考方案2】：

mat-form-field.ng-invalid.ng-touched 
  animation: example;
  animation-duration: 0.3s;
  margin-bottom: 20px;

@keyframes example 
  from 
    margin-bottom: 0;
  
  to 
    margin-bottom: 20px;
  

它对我有用。