Angular响应式表单检查现有的数量

Question

我在我的angular应用程序中有一个表，我存储了一些数据(用户，电子邮件等)，我可以添加新用户，在我的表单中有一个输入字段，我可以输入一个重要数字(1,2,3等)，当然每个数字应该只有一个。如果输入的数字已经存在于我的数据库中，我想显示一条错误消息。是否有一种方法可以使用验证器来检查它?

Answer 1

你应该添加一个自定义异步验证器。

下面的代码创建验证器类CheckIfNumberExistsValidator，它实现AsyncValidator接口。

@Injectable({ providedIn: 'root' })
export class CheckIfNumberExistsValidator implements AsyncValidator {
constructor(private numbersService: NumbersService) {}
validate(
ctrl: AbstractControl
): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
return this.numbersService.isNumberTaken(ctrl.value).pipe(
map(isTaken => (isTaken ? { uniqueNumber: true } : null)),
catchError(() => of(null))
);
}
}

你的表单应该看起来像:

this.yourForm = new FormGroup({
number: new FormControl(0, {
asyncValidators: [this.CheckIfNumberExistsValidator.validate.bind(this.CheckIfNumberExistsValidator )],
updateOn: 'blur' // You can delay updating the form validity
}),
});

NumbersService将负责向数字数据库发出HTTP请求。

如果表单有效则返回null，如果无效则返回ValidationErrors。

注意:不要忘记注入CheckIfNumberExistsValidator

更多信息，请访问:https://angular.io/guide/form-validation#implementing-a-custom-async-validator