角度承诺表单验证答案

【问题标题】：angular promise form validation角度承诺表单验证
【发布时间】：2020-06-20 10:23:01
【问题描述】：

我是 Angular 的新手，正在尝试理解基本的表单验证代码。下面的 checkValidEmail 正在尝试检查用户输入的电子邮件是否等于 super@seret.com。我不明白的是当电子邮件是 super@seret.com 为什么表单验证是错误的？对于完整的源代码 - https://stackblitz.com/edit/angular-p4bz6e?file=src%2Fapp%2Fapp.component.ts

checkValidEmail(control: AbstractControl) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (control.value === 'super@seret.com') {
            resolve({ test: false })
        } else {resolve(null)}
      }, 2000)
    })

【问题讨论】：

在 stackblitz 中，您以 { emailIsTaken: true } 的形式返回。您是否希望仅在 super@seret.com 给出或相反的情况下才能成功验证？

标签： angular angular-promise angular-forms

【解决方案1】：

表单验证将失败，因为在抽象控件或用户定义的验证checkValidEmail 中，您将返回{ emailIsTaken: true }。因此自定义验证返回的任何响应都将添加 emailcontrol 错误属性。

因此，由于从定义的抽象控件添加的错误，表单变得无效。

尝试在 app.component.html 中打印它，如下所示。

<p> Form emailIsTaken {{form.controls.email.errors | json}}</p>

【讨论】：

【解决方案2】：

只需更改自定义验证中的条件并尝试逻辑，

checkValidEmail(control: AbstractControl) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (control.value !== 'super@secret.com') {
        resolve({ emailIsTaken: true })
      } else {resolve(null)}
    }, 2000)
  })

【讨论】：