Angular Form中的异步验证与错误统一处理-JavaScript中文网-JavaScript教程资源分享门户

在Angular中，Form表单是前端开发中使用最广泛的表单之一。除了传统的同步验证之外，异步验证也是很重要的一个特性。通过这种方式，可以在表单元素进行验证的同时，向服务器发送异步请求来检查一个给定的邮箱、用户名、电话等是否已经存在。本文将介绍如何在Angular Form表单中实现异步验证以及如何统一处理表单中的错误信息。

异步验证

FormControl的异步验证

在Angular中，FormControl是用来抽象表单控件的类。使用异步验证的方式来验证FormControl时，需要为FormControl提供一个异步验证函数。该函数需要在请求响应成功后返回一个Observable对象，并以该对象返回的值来判断验证是否通过。

this.form = new FormGroup({
  username: new FormControl('', [
    Validators.required,
    Validators.minLength(3)
  ],
  [this.validateUsername.bind(this)])
});

如上面的代码所示，FormControl可以接收同步验证器和异步验证器。使用异步验证器时，将异步验证器作为第三个参数提供给FormControl。以上述代码为例，validateUsername()函数的返回值是一个Observable对象，该函数在请求响应成功后返回null。像这样，当发生异步验证时，FormControl中也可以处理同步验证和异步验证。

FormArray和FormGroup中的异步验证

FormArray和FormGroup也可以进行异步验证。在这两个类中，使用方法与FormControl基本相同，只需要提供异步验证器函数即可。

this.form = new FormGroup({
  userName: new FormControl('', Validators.required),
  emails: new FormArray([
    new FormControl('', Validators.required, this.emailExistsValidator.bind(this)),
    new FormControl('', Validators.required, this.emailExistsValidator.bind(this))
  ])
}, this.usernameExistsValidator.bind(this));

如上述代码所示，异步验证器也可以用于FormGroup和FormArray。

异步验证可以用于多种情况

异步验证可以用来解决多种不同的问题。下面的例子中，异步验证器会检查是否存在与当前输入不同的用户名。

validateUniqueUserName(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.userService.checkUserNameIsTaken(control.value).pipe(
    map(isTaken => isTaken ? { nonUniqueUserName: true } : null),
    catchError(() => null)
  );
}

错误统一处理

错误信息是非常重要的一点。当在表单中输入不正确的数据时，需要让用户知道他们的错误以及如何更正。通过了解表单控件的错误验证，可以更好地处理错误信息。

处理表单控件的错误信息

对于单个表单控件的错误信息，Angular为每个控件提供了一个errors属性，以获取控件中的错误信息。

-- -------------------- ---- -------
----------------
  ------ --------
      -----------------
      ---------------------------
  ---------- --------------------------------------------------
    -------
  ------------
  ---------- ---------------------------------------------------
    -----------
  ------------
  ---------- -----------------------------------------------------------
    ---------------
  ------------
-----------------

如上面的代码，可以将每个控件的错误提示作为标签中的内容展示出来。当验证不通过时，该标签将被显示，以展示相应的验证失败错误消息。同时，需要根据错误码来动态设置相应的错误信息。

统一处理表单组件的错误信息

对于整个表单中的错误提示，在处理表单控件的错误信息的基础上，可以根据FormGroup中的错误信息来统一处理。同样的思路，为FormGroup做一个错误提示标签。如果表单中的一个或多个表单控件验证不通过，该标签中将显示相应的错误消息。

<mat-form-field *ngIf="hasNonUniqueUsernamError">
  <mat-error>
    用户名已经被注册，请重新输入！
  </mat-error>
</mat-form-field>

同时，需要修改异步验证函数validateUniqueUserName()，并在验证不通过时设置FormGroup中标志位的初始值及FormGroup中的errors属性。

-- -------------------- ---- -------
------------------------------- ----------------- --------------------------- - ----- -
  ------ ----------------------------------------------------------
    ----------- -- -
      -- --------- -
        ------------------------------------- ------------------ ---- ---
        ----------------------------- - -----
      - ---- -- ------------------------------- -
        ------ ------------------------------------------------------
        ----------------------------- - ------
      -
      ------ -----
    ---
    ------------- -- -----
  --
-

如上面的代码所示，validateUniqueUserName()函数在响应返回true时设置了FormGroup.errors属性，以便在表单组件中统一向用户展示错误信息。

总结

在Angular Form表单中实现异步验证和错误统一处理非常重要，同时也是开发人员的必备技能之一。通过这篇文章，你应该已经了解了如何了解如何在Angular中实现异步验证以及如何统一处理表单错误信息，希望这些技巧对于你的前端开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6484255c48841e989434e572