Wait for async validators to finish angular forms

Question

I have an angular form with custom aync validators I want to do some stuff if the form is invalid on load.

Here is the code

ngOnInit() {
        this.signupForm = this.fb.group({
          name: [
            'Prasad P',
            [Validators.required, Validators.maxLength(3)],
            ValidateUserNotTaken.createValidator(this.signupService)
          ],
          email: [
            '',
            [Validators.required, Validators.email],
            ValidateEmailNotTaken.createValidator(this.signupService)
          ]
        });
    
        // watch for status Changes
        this.signupForm.statusChanges.subscribe(status => {
          alert('Form Status Is ' + status);
    
          if(status === 'INVALID') {
            // do_stuff();
          }
        });

  }

The statusChange event never emits a value when loaded once I change anything in form then the event emits and everything works but I really want to know the form is invalid on loading.

I try to run updateValueAndValidity() but it always hangs to PENDING state.

The stackbliz Link : https://stackblitz.com/edit/angular-async-custom-validation-vlz43u?file=src%2Fapp%2Fapp.component.ts

dom.macs · Accepted Answer · 2021-09-14 06:50:20Z

0

I tested your code in stackblitz and I added updateValueAndValidity() after form has been created and it is working fine as expected. Please see this stackblitz.

The other alternative is you can patch your form values to your form to trigger the validation on page load. In the code below, I added setTimeout(() => { this.signupForm.patchValue(this.signupForm.value);}); to trigger the validation on page load. You need to add this after you created the form.

ngOnInit() {
    this.signupForm = this.fb.group({
      name: [
        'Prasad P',
        [Validators.required, Validators.maxLength(3)],
        ValidateUserNotTaken.createValidator(this.signupService)
      ],
      email: [
        '',
        [Validators.required, Validators.email],
        ValidateEmailNotTaken.createValidator(this.signupService)
      ]
    });

    //Added to trigger form validation
    setTimeout(() => {
      this.signupForm.patchValue(this.signupForm.value);
    });

    // watch for status Changes
    this.signupForm.statusChanges.subscribe(status => {
      alert('Form Status Is ' + status);

      if (status === 'INVALID') {
        // do_stuff();
        console.log('TEST');
      }
    });
}

edited Sep 14, 2021 at 6:50

answered Sep 14, 2021 at 6:32

dom.macs

8069 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prasad Parab Over a year ago

It works for OOTB validators but when it came to custom validators it always emits a PENDING status. I have updated the stckBliz link to show custom validator

Collectives™ on Stack Overflow

Wait for async validators to finish angular forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related