Angular 6 - 期望验证器在异步验证器中返回承诺或可观察

Question

在我的 Angular 6 应用程序中，我有一个异步验证器来检查输入的电子邮件是否已注册，但现在我得到"预期验证器返回承诺或可观察"，我真的不知道为什么。

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);
}
}

register-component.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建议的那样，我将表单构建器中的验证器声明从.bind更改为指向验证函数，并对他的主张进行了一些调整，现在一切正常！

最终代码：

register-component.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

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);
}
}

Answer 1

当您添加多个验证器时，您需要将验证器添加到另一个第三个括号 '[]' 中。像下面这样：

this.yourForm= this.formBuilder.group({
amount: [null, [Validators.required, Validators.min(1)]],
});

Answer 2

RxJS的map不接受第二个函数参数。
我猜你想要这样的东西：

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

Answer 3

你必须从checkIfEmailExist返回可观察量：

// ...
return this.userService
.checkIfEmailExist(email)
.pipe(
// ...