Angular 6 - 期望验证器在异步验证器中返回 Promise 或 Observable [英] Angular 6 - Expected validator to return Promise or Observable in async validator

问题描述

在我的 Angular 6 应用程序中，我有一个异步验证器，用于检查输入的电子邮件是否已注册，但现在我收到预期验证器返回 Promise 或 Observable"，但我真的不知道为什么.

In my Angular 6 app I have async validator for checking if typed email is already registered but right now I'm getting 'Expected validator to return Promise or Observable' and I don't really know why.

import { UserService } from '../user/service/user.service';
import { AbstractControl, ValidationErrors, AsyncValidator } from '@angular/forms';
import * as validationUtils from '../validation/validation-utils';
import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmailExistValidator implements AsyncValidator {
  constructor(private userService: UserService) {
  }

  validate(emailControl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    const email = emailControl.value;

    if (new RegExp(validationUtils.emailRegex).test(email)) {
      this.userService
      .checkIfEmailExist(email)
      .pipe(
        map(
        (data) => {
          return {emailExist: true};
        },
        (error) => {
          return null;
        }
      ));
    }
      return of(null);
  }
}

注册组件.ts

  createForm(): FormGroup {
    return this.formBuilder.group({
      email: ['',
      [Validators.required, Validators.email],
      [EmailExistValidator.bind(this)]],
      username: ['', [Validators.required,
        Validators.pattern(validationUtils.usernameRegex)]],
      password: ['', [Validators.required,
        Validators.pattern(validationUtils.passwordRegex)]],
      repeatPassword: ['', [Validators.required]]
  }, {
    validator: EqualPasswordValidator.validate
  });
  }

编辑 17.08.2018正如@Paulie 建议的那样，我将 formbuilder 中的验证器声明从 .bind 更改为指向 validate 函数，并对他的命题进行了一些调整，现在一切正常！

Edit 17.08.2018 As @Paulie suggested I changed validator declaration in formbuilder from .bind to pointing to validate function and with some tweaks to his proposition now everything works!

最终代码:

注册组件.ts

  constructor(
    private formBuilder: FormBuilder,
    private userService: UserService,
    private emailExistsValidator: EmailExistsValidator,
    private usernameExistsValidator: UsernameExistsValidator) { }

  ngOnInit() {
    this.registerForm = this.createForm();
  }

  createForm(): FormGroup {
    return this.formBuilder.group({
      email: ['',
      [Validators.required, Validators.email],
      [this.emailExistsValidator.validate]],
      username: ['', [Validators.required,
        Validators.pattern(validationUtils.usernameRegex)],
        [this.usernameExistsValidator.validate]],
      password: ['', [Validators.required,
        Validators.pattern(validationUtils.passwordRegex)]],
      repeatPassword: ['', [Validators.required]]
  }, {
    validator: EqualPasswordValidator.validate
  });
  }

email-exists-validator.ts

email-exists-validator.ts

import { UserService } from '../user/service/user.service';
import { AbstractControl, ValidationErrors, AsyncValidator } from '@angular/forms';
import * as validationUtils from './validation-utils';
import { Injectable } from '@angular/core';
import { of, Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class EmailExistsValidator implements AsyncValidator {
    static userService: UserService;

  constructor(private userService: UserService) {
    EmailExistsValidator.userService = userService;
  }

  validate(emailControl: AbstractControl): Promise<{ [key: string]: any } | null>
  | Observable<{ [key: string]: any } | null>  {

    const email = emailControl.value;

    if (new RegExp(validationUtils.emailRegex).test(email)) {
        return EmailExistsValidator.userService
        .checkIfEmailExist(email)
        .pipe(
          map(data => ({emailExist: true})),
          catchError(error => of(null))
        );
      }

      return of(null);

}
}

推荐答案

RxJS 的映射不接受第二个函数参数.
我猜你想要这样的东西:

RxJS's map don't take a second function argument.
I guess you want something like this:

if (new RegExp(validationUtils.emailRegex).test(email)) {
  return this.userService
  .checkIfEmailExist(email)
  .pipe(
    map(data => {emailExist: true}),
    catchError(error => null)
  );
}

return of(null);

这篇关于Angular 6 - 期望验证器在异步验证器中返回 Promise 或 Observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！