Angular Material 2：修復多行錯誤消息

Question

我在我的角度應用程序中使用了角度材料 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 材料中的一個錯誤。 有沒有人通過自定義解決方法解決了這個問題？

Answer 1

問題是類.mat-form-field-subscript-wrapper的元素是position: absolute ，所以它不占用實際空間。

正如xumepadismal 在 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;
  }
}

它在靜態 div 中轉換.mat-form-field-subscript-wrapper節點，並在輸入字段之后重新定位.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;
  }
}

它對我有用。