带有角度反应形式的异步表单验证答案

【问题标题】：Async form validation with angular reactive form带有角度反应形式的异步表单验证
【发布时间】：2020-01-17 17:45:23
【问题描述】：

我有一个问题，我没有通过 Angular 的反应形式获得异步验证。在编写有关输入时，我可以保持查询处于活动状态，它会给我带来结果，但我无法在 html 中发送错误。我是 Angular 新手，我不知道我会在代码中遗漏什么。

组件.ts

  this.registroForm = this.fb.group({
  nombre: ["", [Validators.required, Validators.pattern("[a-zA-Z ]*")]],
  apellido: ["", [Validators.required, Validators.pattern("[a-zA-Z ]*")]],
  username: [
    "",
    [Validators.required, this.validateEmailNotTaken.bind(this)]
  ],
  email: ["", [Validators.required, Validators.pattern(this.emailPattern)]],
  telefono1: [
    "",
    [
      Validators.required,
      Validators.maxLength(10),
      Validators.minLength(10),
      Validators.pattern("[0-9]*")
    ]
  ],
  condiciones: ["", [Validators.required]]
});

我的验证功能：每次我在输入中写入时检查，服务器以下列方式响应我，当名称存在于 BD 中时，它会将它的数据带到 json 数组中，但是一个空数组这就是为什么data.length。因此，如果它等于 1，它应该显示错误。但是输入写了任何东西，它被放置为红色而不显示特定的错误（用于验证材料角度），除了它不显示错误是否存在或名称不可用。

  validateEmailNotTaken(control: AbstractControl) {
let username = {
  user: control.value
};
return this.authService.buscarUserUsername(username).subscribe(
  (data: any) => {
    console.log(data.length);
    if (data.length === 1) {
      return { userNameExists: true };
    }
  },
  err => {
    console.log(err);
  }
);

HTML

<mat-form-field appearance="outline" color="accent">
           <mat-label>Usuario</mat-label>
           <input formControlName="username" matInput placeholder="Nombre de usuario">
           <mat-error *ngIf="registroForm.controls['username'].errors?.required">Este campo es obligatorio
           </mat-error>
           <mat-error *ngIf="registroForm.controls['username'].errors?.pattern">No es un nombre de usuario valido
           </mat-error>
           <mat-error *ngIf="registroForm.get('username').errors?.userNameExists">
             Nombre de usuario no disponible               </mat-error>

         </mat-form-field>

【问题讨论】：

您将异步验证器作为普通验证器的一部分。异步验证器应该是第三个参数 --> username: ["", Validators.required, this.validateEmailNotTaken.bind(this)]

标签： angular typescript angular-reactive-forms angular-validation

【解决方案1】：

问题是您试图从subscribe() 中返回值。相反，您应该返回带有此异步验证器的映射响应的 Observable<ValidationErrors | null>。这可以通过使用诸如map 和catchError 之类的管道运算符来实现：

validateEmailNotTaken(control: AbstractControl) {
  let username = {
    user: control.value
  };

  return this.authService.buscarUserUsername(username).pipe(
    map(data => {
      if (data.length === 1) {
        // return error
        return {
          userNameExists: true
        };
      }

      // return null for no errors
      return null;
    }),
    catchError(err => {
      // handle error
      console.log(err);
    })
  )
}

作为一般规则，请仔细查看 Angular 类/接口的返回类型。在任何看到返回类型为 Observable<T> 的地方，您可能无法使用 subscribe()，而需要使用可管道运算符。

还如评论中所建议的，请确保将验证器属性传递给表单配置：

username: ["", Validators.required, this.validateEmailNotTaken.bind(this)]

希望对您有所帮助！

【讨论】：