时间戳

首页 > 解决方案 > 角反应形式检查现有数字

angular - 角反应形式检查现有数字

问题描述

我在我的 Angular 应用程序中有一个表，其中存储了一些数据（用户、电子邮件等），我可以添加新用户，并且在我的表单中有一个输入字段，我可以在其中输入重要性数字（1、2、3等等）当然每个数字应该只有一个。如果键入的数字已存在于我的数据库中，我想显示一条错误消息。有没有办法使用验证器来检查它？

标签： angularangular-reactive-forms

解决方案

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

以下代码创建了验证器类 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

推荐阅读