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

Question

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

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

例如，在输入无效的 email 地址后，密码字段将被向下推以显示错误消息。 与密码验证失败时按下登录按钮的方式相同。

我以前使用过 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;
}

现在warn div 在页面上，占用 16px 并等待包含一条消息，如果验证失败。