Angular 异步验证器 - 处理响应数据

Question

我正在努力使用 angulars 异步验证器。

我创建了一个异步验证器，用于检查文章编号是否存在。该服务返回一个响应对象，包括有关我的文章的详细信息。

目前我正在尝试实现容器/演示组件架构。我的表单应该只接收来自容器组件的异步验证器。

我的问题是，如果文章编号的验证有效，我的表单部分才会显示。应用程序的其余部分填充了来自异步验证响应的数据。

当在我的演示组件中使用逻辑时，这很有效，但我认为这不是正确的方法。 如果我通过属性绑定向我的展示组件提供数据并在我的容器组件中接收异步验证的数据，那就更好了。

这是正确的方法，如果是，如何？或者我应该只为异步验证创建一个请求并在字段有效后单独获取数据？

目前我的验证器如下所示：

  private checkArticleNrValidator(
    ctrl: AbstractControl
  ): Observable<ValidationErrors | null> {
    return this.ps.getArticle(+ctrl.value).pipe(
      tap(d => this.article = +d.Data.Artikel),
      map(() => null),
      catchError(e => of({ articleNrError: e }))
    );
  }

并且像这样在我的演示组件中使用

articleNr: [
  '',
  [Validators.required, Validators.pattern(/^([0-9]{5})$/)],
  this.checkArticleNrValidator.bind(this) <---
],

分离这个逻辑的方法是什么？或者这总体上是一个错误的方法。

Answer 1

理论上表示组件用于接收 (@Input) 和 显示数据/触发事件（@Output）。

因此，在您的情况下，我会将“checkArticleNrValidator”逻辑移到您的展示组件之外，例如在容器中（如果这导致容器和展示组件之间存在循环依赖关系，只需将其移动到新的 ts 文件，如 blablabla.validators .ts 并在导出函数中实现逻辑）

PS：我猜你的 ps 变量是一项服务。我们称之为 PService。

export function checkArticleNrValidator(ps: PService): AsyncValidatorFn {
   return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return ps.getArticle(control.value)
             .pipe(
                 tap(d => this.article = +d.Data.Artikel),
                 map(() => null),
                 catchError(e => of({ articleNrError: e}))
             );
   }
}