implementing Form Validation in Angular Reactive Forms - Async Validator Not Triggering on Dynamic Fields
Quick question that's been bugging me - I'm having trouble with Angular Reactive Forms where I'm dynamically adding form controls, but my async validator doesn't seem to trigger for these new fields. I am using Angular version 12.1.1 and I have the following setup: I have a form group that contains a list of email fields, which are added dynamically. The async validator checks if the email is already taken by making an API call. Here’s how I set it up: ```typescript import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { EmailValidatorService } from './email-validator.service'; @Component({ selector: 'app-email-form', templateUrl: './email-form.component.html', }) export class EmailFormComponent implements OnInit { emailForm: FormGroup; constructor(private fb: FormBuilder, private emailValidator: EmailValidatorService) { this.emailForm = this.fb.group({ emails: this.fb.array([]) }); } ngOnInit() { this.addEmailField(); } addEmailField() { const emailControl = this.fb.control('', { validators: [Validators.required, Validators.email], asyncValidators: [this.emailValidator.validateEmail()], updateOn: 'blur' }); this.emails.push(emailControl); } get emails() { return this.emailForm.get('emails'); } } ``` However, when I add a new email field using `addEmailField()`, the async validator does not seem to get triggered. I checked the network tab and the API call to validate the email is not being made. I've also tried calling `markAsTouched()` right after adding the control, but that didn't help. The interesting part is that if I initially define form controls in the template, they work perfectly. Here’s the relevant part of the template: ```html <form [formGroup]='emailForm'> <div formArrayName='emails'> <div *ngFor='let emailControl of emails.controls; let i = index'> <input [formControlName]='i' placeholder='Enter email' /> <div *ngIf='emailControl.errors?.asyncValidation'>Email is already taken.</div> </div> </div> <button (click)='addEmailField()'>Add Email</button> </form> ``` I’ve also checked that the `validateEmail` function in the `EmailValidatorService` is defined correctly and returning an observable. I can’t seem to find what I’m doing wrong. Any suggestions or insights would be greatly appreciated! Any examples would be super helpful.