Angular 角度材质错误消息隐藏在下一行后面

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

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>

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' :
            '';
  }
}

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

---

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

至于您的答案，对于

，没有公开的属性，您可以将其设置为使错误框大小动态等

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

---

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

使用下面的

css

解决此问题：

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

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

---

您可以将上边距添加到下一个元素，类似这样

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