Angular 异步验证器 - 使用响应数据

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. 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.

Answer 1

Theorically Presentational Components are used to receive (@Input) and display data / trigger events (@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)

PS: I Guess your ps variable is a service. Let's call it 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}))
             );
   }
}