这不是我第一次使用AsyncValidator，但这次我试图创建更复杂的东西。我正在建立一个银行网站。在我的项目中，每个用户都有多个帐户。
我的表单中有两个输入区域：
- Input-1 接受用户名。
- Input-2 取帐号。
我想从 Input-1 中获取用户名并找到用户拥有的帐户，如果 Input-2 中的帐号不是用户的帐户之一，我想给 Input-2 一个错误。
角 V8
就像在这张照片中...
这是验证器：
import { Directive, Input } from '@angular/core';
import { AsyncValidator, ValidationErrors, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { Observable, Subscription, of } from 'rxjs';
import { UserService } from '../service/user.service';
import { map, take, switchMap, tap } from 'rxjs/operators';
import { AccountService } from '../service/account.service';
@Directive({
selector: '[transferAccountid]',
providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: TransferAccountidValidatorDirective, multi: true }]
})
export class TransferAccountidValidatorDirective implements AsyncValidator {
@Input('transferAccountid') controlUsername: string;
constructor(private userService: UserService, private accountService: AccountService) { }
validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
const username = c.root.get(this.controlUsername);
let id: number;
if (username) {
return this.userService.getUserByUsername(username.value).pipe(
switchMap(user => {
if (user[0] != null) {
id = user[0].id;
return this.accountService.getAccountsByUser(id)
.pipe(
map(accounts => {
return accounts.map(account => {
console.log("AccountId: " ,account.id);
return account.id === c.value ? null : {'transferAccountid': true}
})
})
);
} else { return new Observable<null>(); }
})
);
}
}
}
先感谢您。