角材料错误消息隐藏在下一行后面答案

【问题标题】：Angular material error message is hidden behind the next row角材料错误消息隐藏在下一行后面
【发布时间】：2018-12-19 04:16:55
【问题描述】：

我在我的应用程序中使用了角度材料，但遇到了一个问题，基本上当错误消息太大时，错误消息隐藏在下一个输入后面：

HTML：

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Enter your email">
  </mat-form-field>
</div>

TS：

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'form-field-error-example',
  templateUrl: 'form-field-error-example.html',
  styleUrls: ['form-field-error-example.css'],
})
export class FormFieldErrorExample {
  email = new FormControl('', [Validators.required, Validators.email]);

  getErrorMessage() {
    return this.email.hasError('required') ? 'You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value You must enter a value ' :
        this.email.hasError('email') ? 'Not a valid email' :
            '';
  }
}

真的不知道如何使用材料模式来解决这个问题，或者可能使用另一种方法，例如纯 css（覆盖材料类或添加新类 - 但我仍然不知道这是否正确做）

STACKBLITZ

【问题讨论】：

标签： angular html css angular-material

【解决方案1】：

这可能会有所帮助，它描述了表单验证的一些最佳实践。

Form validation best practices

至于您的答案，<mat-error> 没有公开属性，您可以设置这些属性以使错误框大小动态等。

您将不得不使用不同的方法，例如：隐藏溢出并在悬停时显示弹出窗口。

验证错误信息应该简洁，任何额外的数据应该单独显示。

【讨论】：

【解决方案2】：

使用下面的css 来解决这个问题：

.mat-form-field-subscript-wrapper{ position: static; }

.mat-form-field-underline{ position: static; }

【讨论】：

【解决方案3】：

你可以为下一个元素添加上边距，像这样

[ngClass]="{ 'mt-20': form.controls['password'].hasError('pattern') }"

【讨论】：