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

Question

我在 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 material 中的错误。有没有人设法通过自定义解决方法解决了这个问题？

Answer 1

问题是 class .mat-form-field-subscript-wrapper 的元素是 position: absolute，所以它没有真正占据 space。

按照建议 on this issue on github by xumepadismal，您可以添加此 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。

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

对我有用。

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

Angular Material 2: Fix for Multiline Error messages

angular2-forms

angular-material2

angular