typescript 35 lines · 6 steps

How an async username validator works in Angular

A debounced, HTTP-backed reactive form validator that checks whether a username is already taken.

Explained by highlit
Angular Intermediate async-validation reactive-forms rxjs debouncing http
1import { Injectable } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3import {
4 AsyncValidator,
5 AbstractControl,
6 ValidationErrors,
7} from '@angular/forms';
8import { Observable, of, timer } from 'rxjs';
9import { catchError, map, switchMap } from 'rxjs/operators';
10 
11@Injectable({ providedIn: 'root' })
12export class UsernameAvailabilityValidator implements AsyncValidator {
13 constructor(private http: HttpClient) {}
14 
15 validate(
16 control: AbstractControl,
17 ): Observable<ValidationErrors | null> {
18 const username = (control.value ?? '').trim();
19 if (!username) {
20 return of(null);
21 }
22 
23 return timer(400).pipe(
24 switchMap(() =>
25 this.http.get<{ available: boolean }>('/api/users/availability', {
26 params: { username },
27 }),
28 ),
29 map(({ available }) =>
30 available ? null : { usernameTaken: { value: username } },
31 ),
32 catchError(() => of({ availabilityCheckFailed: true })),
33 );
34 }
35}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Async validators return an Observable so form validity can depend on a server round-trip.
  2. 2A leading timer plus switchMap debounces input and cancels stale in-flight requests.
  3. 3catchError keeps a failed network call from silently blocking form submission.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
java 
public static Map<String, String> parseCookieHeader(String header) {
    Map<String, String> cookies = new LinkedHashMap<>();
    if (header == null || header.isBlank()) {
        return cookies;

Parsing an HTTP Cookie header in Java

string-parsing http url-decoding
Intermediate 6 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

How an async username validator works in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code