How do you optimize the performance of async validators?

Since all validators run after every form value change, it creates a major impact on performance with async validators by hitting the external API on each keystroke. This situation can be avoided by delaying the form validity by changing the updateOn property from change (default) to submit or blur. The usage would be different based on form types,

  1. Template-driven forms: Set the property on ngModelOptions directive
    <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}" />
  2. Reactive-forms: Set the property on FormControl instance
    name = new FormControl('', { updateOn: 'blur' });

May 01, 2022