如何在 Angular 中为表单验证消息保留空间？

Question

这个问题有一个基于 Angular 文档的Stackblitz ， Validating input in reactive forms。给定一个带有验证的简单 Angular 形式：

如何阻止表单在显示错误消息时跳来跳去？

例如，当输入无效的电子邮件地址时，密码字段会被向下推以显示错误消息。以同样的方式，当密码验证失败时，将按下登录按钮。

我之前使用过 Angular Material Form Fields，它有自己的方式为验证消息保留空间。

我知道我需要为错误消息保留一些空间，但是应该如何实现呢？到目前为止我拒绝了两个想法：

• 对显示错误消息的空间高度进行硬编码（如果用户使用不同的字体大小或其他设置怎么办？似乎太脆弱了。）
• 当没有错误消息时，使用白色背景上的白色字体来保留空间（破坏屏幕阅读器，感觉黑客攻击）

有条件地显示错误消息的 HTML 代码是

<form [formGroup]="form" fxLayout="column" fxLayoutGap="24px">

    <!-- Email -->
    <div>
        <label for="email">Email</label>
        <input id="email" formControlName="email">
        <!-- Errors -->
        <div *ngIf="email.invalid && email.dirty" class="warn">
            <div *ngIf="email.errors.required">Email is required</div>
            <div *ngIf="email.errors.email">Must be a valid email address</div>
        </div>
    </div>

    <!-- Password -->
    <div>
        <label for="password">Password</label>
        <input id="password" type="password" formControlName="password">
        <!-- Errors -->
        <div *ngIf="password.invalid && password.dirty" class="warn">
            <div *ngIf="password.errors.required">Password is required</div>
        </div>
    </div>

    <!-- Button -->
    <button class="submit">Login</button>

</form>

Answer 1

解决这个问题的一种方法是使div错误的包装具有一定的高度，以便它始终显示在屏幕上，并且其中的错误消息有条件地显示。

<div class="warn">
    <ng-container *ngIf="email.invalid && email.dirty">
            <div *ngIf="email.errors.required">Email is required</div>
            <div *ngIf="email.errors.email">Must be a valid email address</div>
    </ng-container>
</div> 

.warn {
  color: #FF3636;
  font-size: 14px;
  text-align: right;
  height: 16px;
}

现在warndiv 位于页面上，占用 16 像素，并且只是等待包含验证失败时的消息。