Here is the structure of my Async Validator:
asyncValidator(service:ApiCallsService):AsyncValidatorFn{
return (control:FormControl):Promise<ValidationErrors | null> | Observable<ValidationErrors | null> =>{
let timer$ = timer(2000);
return timer$.pipe(
take(1),
switchMap(()=> {
let videoId = service.checkUrl(control.value);
return service.getVideoDescription(videoId).toPromise().then((val:any)=>{
return (!val.id) ? {"invalidUrl": true} : null;
})
})
)
}
}
The issue I am facing with my Async Validator is that the FormControls in my FormArray do not reflect their current 'status' until they are blurred.
Below is my FormArray and the FormControl within it:
<div class="url-con" formArrayName="urls" >
<div *ngFor="let url of urls.controls; let i=index" class="url-input-con">
<input minLength="5" placeholder="Video Url" class="url-input" [formControlName]="i">
<div class="url-pending" *ngIf="urls.controls[i].pending && !urls.controls[i].valid">Validating...</div>
</div>
</div>
The "url-pending" div remains visible even after validation, until the associated FormControl is blurred.
I encountered a similar issue discussed in this link. However, I could not fully implement the solution provided. Additionally, my scenario involves adding new FormControls dynamically through an icon shaped as a plus sign, which added to my complexity.
I will post my own answer detailing how I managed to resolve this issue, but I acknowledge that my approach may be considered somewhat unconventional. Any suggestions for a more optimal solution would be greatly appreciated.