feat: show pending validation

Author: d-koppenhagen

src/app/registration-form-2/registration-form-2.html

@@ -14,6 +14,9 @@ <h1>Version 2: Advanced Validation and Schema Patterns</h1>
       [control]="registrationForm.username"
       [ariaInvalid]="ariaInvalidState(registrationForm.username)"
     />
+    @if (registrationForm.username().pending()) {
+      <small>Checking availability ...</small>
+    }
     <app-form-error [field]="registrationForm.username" />
   </label>
 

src/app/registration-form-2/registration-form-2.ts

@@ -130,7 +130,7 @@ export class RegistrationForm2 {
   protected readonly registrationForm = form(this.registrationModel, formSchema);
 
   protected ariaInvalidState(field: FieldTree<unknown>): boolean | undefined {
-    return field().touched() ? field().errors().length > 0 : undefined;
+    return field().touched() && !field().pending() ? field().errors().length > 0 : undefined;
   }
 
   protected addEmail(): void {

src/app/registration-form-3/registration-form-3.html

@@ -14,6 +14,9 @@ <h1>Version 3: Child Forms and Custom UI Controls</h1>
       [control]="registrationForm.username"
       [ariaInvalid]="ariaInvalidState(registrationForm.username)"
     />
+    @if (registrationForm.username().pending()) {
+      <small>Checking availability ...</small>
+    }
     <app-form-error [field]="registrationForm.username" />
   </label>
 

src/app/registration-form-3/registration-form-3.ts

@@ -141,7 +141,7 @@ export class RegistrationForm3 {
   protected readonly registrationForm = form(this.registrationModel, formSchema);
 
   protected ariaInvalidState(field: FieldTree<unknown>): boolean | undefined {
-    return field().touched() ? field().errors().length > 0 : undefined;
+    return field().touched() && !field().pending() ? field().errors().length > 0 : undefined;
   }
 
   protected addEmail(): void {

src/app/registration-service.ts

@@ -23,7 +23,7 @@ export class RegistrationService {
     return new Promise<boolean>((resolve) => {
       setTimeout(() => {
         resolve(username === 'johndoe');
-      }, 500);
+      }, 2000);
     });
   }
 }