延迟 Angular 表单中的文本字段验证消息

Question

我有以下角度形式：

<form class="needs-validation" [formGroup]="loginForm.formGroup!" (ngSubmit)="onSubmit()" novalidate>
  <!--*! Email -->
  <div class="mb-3">
    <div class="form-floating">
      <input id="inputEmail" type="email" class="form-control" [ngClass]="{ 'is-invalid': invalidEmail() }"
        formControlName="email" (input)="resetInput('email')" placeholder="Email address" spellcheck="false">
      <label for="inputEmail" class="form-label text-dark">Email address</label>
    </div>
    <div class="text-danger" *ngIf="invalidEmail()">
      <small>{{ invalidEmail() }}</small>
    </div>
  </div>

  ...

</form>

在浏览器中看起来像这样：

如您所见，我还有一个invalidEmail函数，如果电子邮件无效，该函数将返回带有错误消息的字符串（如果电子邮件有效，则返回空字符串）

invalidEmail() {
  if (this.loginForm['email']?.touched) {
    if (this.validationErrors['email']?.message) {
      return this.validationErrors['email'].message;
    }
    if (this.loginForm['email']?.invalid) {
      return 'Invalid email address';
    }
  }
  return '';
}

我遇到的问题是，只要我离开电子邮件字段（将其留空），就会显示错误消息：

这会导致忘记密码？ 并注册以向下移动。 因此，如果用户的光标位于电子邮件字段中并尝试单击忘记密码？ 链接，链接将被向下移动，以防止点击发生。

我认为也许延迟显示错误消息可以解决问题，但我还没有找到让它工作的方法。

关于如何实现这一点或解决此可访问性问题的解决方法有什么建议吗？

Answer 1

为什么不在提交期间调用invaildEmail，仅在有效时调用api，如果无效则抛出可能解决问题的错误