Angular Reactive Forms: Async Validator Not Firing for Nested Form Groups
I'm having trouble with I'm collaborating on a project where Hey everyone, I'm running into an issue that's driving me crazy... I've looked through the documentation and I'm still confused about This might be a silly question, but I'm working on an Angular 13 application where I'm using Reactive Forms. I have a parent form group that contains a nested form group, and I want to implement an async validator for one of the fields in the nested form group. However, the async validator isn't firing as expected when I change the input value, and the related behavior message isn't showing up. I've set up my form like this: ```typescript this.parentForm = this.fb.group({ name: ['', Validators.required], details: this.fb.group({ email: ['', [Validators.required, Validators.email], [this.emailAsyncValidator]], age: ['', Validators.required] }) }); ``` The async validator is defined like this: ```typescript emailAsyncValidator(control: FormControl) { return this.userService.checkEmailExists(control.value).pipe( map(exists => (exists ? { emailTaken: true } : null)), catchError(() => of(null)) ); } ``` The scenario arises when I try to type an email into the email field. I see that the validator isn't being triggered, and the behavior message `emailTaken` isn't appearing. I've ensured that I am importing `ReactiveFormsModule` in my module and have also verified that `checkEmailExists` returns an observable. I've tried adding a `console.log` inside the validator to see if it gets called, but it never does when I change the form control’s value. I've also confirmed that the form is being marked as dirty when editing. What am I missing here? Why isn’t the async validator firing for the nested form group? Any insight would be greatly appreciated! For context: I'm using Typescript on Linux. Is there a better approach? How would you solve this? This issue appeared after updating to Typescript stable. Cheers for any assistance!