Angular Reactive Forms - FormArray not updating when using custom async validator
I've tried everything I can think of but I can't seem to get I'm migrating some code and Quick question that's been bugging me - This might be a silly question, but I’m facing an issue with an Angular Reactive Form where I am using a `FormArray` to manage a dynamic list of items. I have implemented a custom async validator that checks the uniqueness of the item names against a backend API, but I’m noticing that when I add new items to the array, the async validation doesn't seem to trigger correctly for the newly added controls. Here is the relevant part of my code: ```typescript import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; @Component({ selector: 'app-item-form', templateUrl: './item-form.component.html', }) export class ItemFormComponent { itemForm: FormGroup; constructor(private fb: FormBuilder, private http: HttpClient) { this.itemForm = this.fb.group({ items: this.fb.array([]) }); } get items(): FormArray { return this.itemForm.get('items') as FormArray; } addItem() { const itemControl = this.fb.control('', [Validators.required], this.asyncUniqueValidator()); this.items.push(itemControl); } asyncUniqueValidator(): AsyncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { return control.valueChanges.pipe( switchMap(value => this.checkUniqueness(value)), map(isUnique => (isUnique ? null : { notUnique: true })) ); }; } checkUniqueness(value: string): Observable<boolean> { return this.http.get<boolean>(`/api/check-unique?name=${value}`); } } ``` I've confirmed that the `checkUniqueness` API call is working and returning the expected results. However, when I add a new item, the validation appears to only trigger for the already existing controls and skips the new control. I’ve tried manually marking the controls as touched or dirty after adding them, and even tried calling `updateValueAndValidity()` on the new control, but it hasn't resolved the issue. Here are the relevant versions I’m using: - Angular: 12.0.0 - RxJS: 7.2.0 I would appreciate any guidance on how to ensure that the async validator is triggered correctly for newly added items in the `FormArray`. Any ideas what could be causing this? This is part of a larger CLI tool I'm building. How would you solve this? I'm developing on Linux with Typescript. Cheers for any assistance! How would you solve this? This is my first time working with Typescript stable.