javascript - 角度异步验证器-使用响应数据(Angular async validator - work with response data)

Question

I'm struggling with angulars async validators.

(我正在努力与角度异步验证器。)

I created a async validator, which checks if an article number is existent.

(我创建了一个异步验证器，用于检查商品编号是否存在。)

The service returns a response object, including detailed information about my article.

(该服务返回一个响应对象，包括有关我的文章的详细信息。)

Currently I'm trying to implement the Container/Presentational Components architecture.

(当前，我正在尝试实现容器/ Presentational组件体系结构。)

My form should only receive the async validator from the container component.

(我的表单应该只从容器组件接收异步验证器。)

My problem is, that parts of my form are only shown, if the validation of article number is valid.

(我的问题是，仅当商品编号的验证有效时，才会显示表单的某些部分。)

The rest of the application is filled with data from the response of the async validation.

(应用程序的其余部分充满了来自异步验证响应的数据。)

This works, when using the logic inside my presentational component, but I don't think this is the right way.

(当在我的表示组件中使用逻辑时，这种方法有效，但是我认为这不是正确的方法。)

It would be better, if I would give my presentational component the data via property binding and receive the data of the async validation inside my container component.

(如果我可以通过属性绑定为演示组件提供数据，并在容器组件内部接收异步验证的数据，那就更好了。)

Is this the right way, if yes, how?

(这是正确的方法吗（如果是的话）如何？)

Or should I create a request only for the async validation and fetch the data seperatly, after the field is valid?

(还是应该在字段有效后才为异步验证创建请求并单独获取数据？)

Currently my validator looks like this:

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

  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 }))
    );
  }

and is used inside my presentational component like this

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

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

What is the way to seperate this logic?

(分离此逻辑的方法是什么？)

Or is this overall a wrong approach.

(还是这总体上是错误的方法。)

  ask by Urastor translate from so

Answer 1

Theorically Presentational Components are used to receive (@Input) and display data / trigger events (@Output).

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

So In your case I'd move that 'checkArticleNrValidator' logic outside your presentational component, for example in the container (if that causes a circular dependency between container and presentational components just move it to a new ts file like blablabla.validators.ts and implement the logic there inside an export function)

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

PS: I Guess your ps variable is a service.

(PS：我猜你的ps变量是一项服务。)

Let's call it PService.

(我们称之为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}))
             );
   }
}