Angular Async Validators sent to Dumb component

Question

You define the FormGroup in the Dumb component to keep related data together. Then you need async validators on some form controls, but dumb component should not have service calls. One option is to send AsyncFn as Input(). How would you handle this?

dumb.component.ts

export class AddEditNameComponent {
  @Input() form: FormGroup;
  @Input() nameAlreadyExistsValidator: AsyncValidatorFn;

  ngOnInit(): void {
    this.form = this.initFormGroup();
  }

  private initFormGroup() {
    return new FormGroup({
      id: new FormControl(0),
      name: new FormControl('', [Validators.required], [this.nameAlreadyExistsValidator]),
    });
  }
}

Answer 1

You are correct. In such a case you can define validator function in place where necessary services might be reached and then pass it to the dumb component. Just don't forget to .bind(this), because forms always lose it. Also you can always refer to official documentation