Angular Reactive Forms 使用服务中的 Observable 进行异步验证

Question

我正在使用 Angular 8.3.4 做一个 Web 应用程序。我有一个使用反应式表单的表单，我想添加异步验证以确保输入的名称是唯一的。我已经阅读了很多示例，但由于某种原因不适用于我。

服务

export class BrandService {
  brands: Observable<BrandId[]>;
}

组件

export class CreateNewComponent {

  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private brandService: BrandService
  ) {
    // Creates a form group
    this.form = this.formBuilder.group({
      name: ['', Validators.compose([
        Validators.required,
        Validators.minLength(6),
        CustomValidator.unique(this.brandService.brands)
      ])]
    });
  }
}

自定义验证器

export class CustomValidator {

  static unique(brands: Observable<BrandId[]>) {
    return (control: AbstractControl) => {

      const name = control.value.toLowerCase();

      return brands.pipe(
        map(items => items.filter(b => b.name.toLowerCase() === name)),
        map(items => items.length ? {unique: false} : null)
      );

    };
  }

}

我将服务的 Observable 从组件传递给 CustomValidator。现在，控件有：status: "INVALID"

顺便说一句，我应该在我的unique 方法中显式返回什么？

我的目标是知道该名称是否已经存在于 Observable 的数组中以返回控制错误。

Answer 1

异步验证器应该通过另一个数组（或它自己）传入，类似于

name: [
  '', 
  Validators.compose([ Validators.required, Validators.minLength(6)]), 
  () => CustomValidator.unique(this.brandService.brands)
]

还要注意它在函数中，我早期发现的许多示例都使用bind，例如in this article，但我更喜欢使用函数。

------编辑 ------ 这是一个工作示例

@Component({
  selector: 'app-new',
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.css']
})
export class NewComponent {

  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private brandService: BrandService,
  ) {
    const brand = new BrandId();
    brand.name = 'abcdef';

    this.brandService.brands = of([brand]);
    // Creates a form group
    this.form = this.formBuilder.group({
      name: ['', Validators.compose([
        Validators.required,
        Validators.minLength(6),
      ]),
        (control) => CustomValidator.unique(this.brandService.brands, control)]
    });
  }
}

export class CustomValidator {
  static unique(brands: Observable<BrandId[]>, control: AbstractControl) {
    const name = control.value.toLowerCase();

    return brands.pipe(
      map(items => items.filter(b => b.name.toLowerCase() === name)),
      map(items => items.length ? { unique: false } : null)
    );

  }
}