Reactive Angular form to wait for async validator complete on submit

Question

I am building a reactive angular form and I'm trying to find a way to trigger all validators on submit. If the validor is a sync one, it'd be ok, as I can get the status of it inline. Otherwise, if the validator is an async one and it was not triggered yet, the form on ngSubmit method would be in pending status. I've tried to register a subscribe for the form statusChange property, but it's not triggered when I call for validation manualy with markAsTouched function.

Here's some snippets:

   //initialization of form and watching for statusChanges
   ngOnInit() {
        this.ctrlForm = new FormGroup({
            'nome': new FormControl('', Validators.required),
            'razao_social': new FormControl('', [], CustomValidators.uniqueName),
            'cnpj': new FormControl('', CustomValidators.cnpj),
        });

        this.ctrlForm.statusChanges.subscribe(
            x => console.log('Observer got a next value: ' + x),
            err => console.error('Observer got an error: ' + err),
            () => console.log('Observer got a complete notification')
        )
    }
    //called on ngSubmit
    register(ctrlForm: NgForm) {
            Forms.validateAllFormFields(this.ctrlForm);
            console.log(ctrlForm.pending); 
            //above will be true if the async validator
            //CustomValidators.uniqueName was not called during form fill.
    }
    //iterates on controls and call markAsTouched for validation,
    //which doesn't fire statusChanges
    validateAllFormFields(formGroup: FormGroup) {         
          Object.keys(formGroup.controls).forEach(field => {  
              const control = formGroup.get(field);             
              if (control instanceof FormControl) {             
                control.markAsTouched({ onlySelf: true });
              } else if (control instanceof FormGroup) {        
                this.validateAllFormFields(control);            
              }
          });
      }

Any ideas on how can I ensure that the async validator was executed so I can continue with the register logic having all validators triggered and completed?

try to use this.roleForm.get("razao_social").setAsyncValidators([CustomValidators.uniqueName]) to assign the validator — Ricardo
Why not make a customValidator that return a observable, and in register call CustomValidator(ctrlForm.value).subscribe(res=>{if (res.ok) continue else showError)? — Eliseo
@Eliseo, indeed, it will solve the problem, i hadn't thought about this, but I hope there's an more automatic solution, where i shouldn't need to know the validator on the ngSubmit, using the markAsTouched or similar — iangoop
@Ricardo I don't see how can it help me to retrieve the status on the register method, if you can give me some ideas on that... — iangoop
@iangoop the idea of custom validators is be executed once the field is modified.. if your validator is not working is because two reasons: bad implementation or bad assignation to the field, the solution I give to your is for bad assignation, just try to test if at least the method has been called — Ricardo

kyranjamie kyranjamie · Accepted Answer · 2018-09-05T18:00:37

Angular doesn't wait for async validators to complete before firing ngSubmit. So the form may be invalid if the validators have not resolved.

Using a Subject to emit form submissions, you can switchMap to form.statusChange and filter the results.

Begin with a startWith to ensure there's no hanging emission, in the case the form is valid at the time of submission.

Filtering by PENDING waits for this status to change, and take(1) makes sure the stream is completed on the first emission after pending: VALID or INVALID.

//
// <form (ngSubmit)="formSubmitSubject$.next()">

this.formSubmitSubject$ = new Subject();

this.formSubmitSubject$
  .pipe(
    tap(() => this.form.markAsDirty()),
    switchMap(() =>
      this.form.statusChanges.pipe(
        startWith(this.form.status),
        filter(status => status !== 'PENDING'),
        take(1)
      )
    ),
    filter(status => status === 'VALID')
  )
  .subscribe(validationSuccessful => this.submitForm());

You can also add a tap that triggers the side effect of settings the form as dirty.

Reactive Angular form to wait for async validator complete on submit

6 Answers