角反应表格 - 自定义验证器呼叫服务

Question

角度应用和反应性形式。 我需要验证每个创建的新记录的名称的唯一性。 我有这样做的后端端点，因此返回布尔值。 现在，我需要将其连接到表单字段，但找不到这样做的方式。 理想情况下，我需要一个自定义验证器，可以添加到现场验证器中，但任何解决方案实际上都适合。

这是表格：

groupForm : FormGroup = new FormGroup({
        shortName: new FormControl(null, [Validators.required,
            Validators.minLength(1), Validators.maxLength(10), Validators.pattern(this.shortNameRegex)]),
        fullName: new FormControl(null, [Validators.required,
            Validators.minLength(1), Validators.maxLength(100)]),
        emailDomains: new FormControl(null, [Validators.required]),
        addressLine1: new FormControl(null, []),
        addressLine2: new FormControl(null, []),
        townCity: new FormControl(null, []),
        county: new FormControl(null, []),
        eircode: new FormControl(null, [Validators.pattern(this.eircodeRegex)]),
        ratingScales: new FormControl(null, []),
    });

这是函数调用：

checkGroupUnique() {
    this.onLenderGroupService.checkGroupUnique(this.groupForm.controls.shortName.value).subscribe(res => {
            this.isGroupUnique = res;
        });
    }

但是我还没有在任何地方称呼它，我需要将此类验证器添加到名为“ Shortname”的第一个字段。

Answer 1

可以在Angular中创建异步验证器：

groupForm = new FormGroup({
  shortName: new FormControl(null, [Validators.required, ..., this.checkGroupUnique.bind(this)]),

...

checkGroupUnique(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.onLenderGroupService.checkGroupUnique(control.value).pipe(
    map(isUnique => {
      if (isUnique) {
        return null; // no error
      } else {
        return { isGroupUnique: true };
      }
    })
  );
}

<label *ngIf="groupForm.controls.shortName.errors?.isGroupUnique">
  Group name is not unique!
</label>