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

超文本标记语言：

<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（覆盖材质类或添加新类-但我仍然不知道这是否是一件正确的事情）

**一个