Async validators perform external checks and return a supported asynchronous validation result. Pending is a real state distinct from valid or invalid.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: A username check returns null when available or a keyed error when taken. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Return a validation result
Availability success yields null; a taken username yields a keyed validation error. These are distinct from transport failure.
Step 2: Respect pending work
Show pending state while checking and account for superseded values. The answer for an old name must not validate the new name.
Step 3: Choose an outage policy
Decide whether verification failure blocks submission or permits deferred validation. Communicate that policy rather than treating failure as availability.
Worked scenario
A username check returns null when available or a keyed error when taken.
The user enters ada, then aditya before the first check finishes. The active value’s validation must own the displayed outcome. If the service is unavailable, report inability to verify rather than ‘available’. A client availability check remains advisory: the server must enforce uniqueness when registration is actually submitted.
Common mistake
Treating a network outage as proof the username is available hides a failure mode.
Verify the behavior
Test taken, available, delayed, superseded and failed checks. Attempt concurrent registration to verify the server’s uniqueness constraint.
Interview exercise
Handle an unavailable validation service.
Answer and reasoning
Define a separate validation failure policy and user message; test slow, cancelled and failed requests.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.