Validação assíncrona - AsyncValidatorFn Angular

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "projeto-async-validator": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/projeto-async-validator",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.scss",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeflex/primeflex.css"
            ],
            "scripts": []
          },
          "configurations": {},
          "defaultConfiguration": "production"
        },
        "serve": {},
        "extract-i18n": {},
        "test": {}
      }
    }
  },
  "cli": {}
}

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ButtonModule,
    HttpClientModule,
    InputTextModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  formGroup: FormGroup = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.pattern(/^[a-z]{3,10}$/),
    ]),
    email: new FormControl('', [
      Validators.required,
      Validators.email,
    ]),
  });

  get username() {
    return this.formGroup.get('username');
  }

  get email() {
    return this.formGroup.get('email');
  }

  postar() {
    if (this.formGroup.invalid) {
      return;
    }

    console.log(this.formGroup.value);
  }
}

<h1>Cadastro</h1>
<form
  class="grid"
  [formGroup]="formGroup"
  (ngSubmit)="postar()">
  <div class="col-12 md:col-6">
      
    <!-- USERNAME -->
    <div class="p-inputgroup">
      <span class="p-inputgroup-addon">
        <i class="pi pi-user"></i>
      </span>
      <input
        autofocus
        formControlName="username"
        pInputText
        placeholder="Cadastre um username"
        type="text" />
    </div>
      
    <!-- USERNAME: MENSAGENS DE VALIDAÇÃO -->
    <!-- 
         Deixei o "username && username.errors"
         na condição abaixo para evitar o uso
         do safe navigation operator (?.) Fiz
         isto porque acredito que o código ficou
         mais legível, mas é só uma opinião pessoal!
    -->
    <div
      class="p-error"
      *ngIf="
        username &&
        username.errors &&
        username.invalid &&
        (username.dirty || username.touched)
      ">
      <div *ngIf="username.errors['required']">
        Username é obrigatório
      </div>
      <div *ngIf="username.errors['pattern']">
        Este campo deve conter apenas letras
        minúsculas de 3 a 10 caracteres
      </div>
    </div>
  </div>
    
  <!-- EMAIL -->
  <div class="col-12 md:col-6">
    <div class="p-inputgroup">
      <span class="p-inputgroup-addon">
        <i class="pi pi-at"></i>
      </span>
      <input
        formControlName="email"
        pInputText
        placeholder="Informe seu e-mail"
        type="email" />
    </div>
      
    <!-- EMAIL: MENSAGENS DE VALIDAÇÃO -->
    <div
      class="p-error"
      *ngIf="
        email &&
        email.errors &&
        email.invalid &&
        (email.dirty || email.touched)
      ">
      Por favor, informe um e-mail válido
    </div>
  </div>

  <div class="col-12">
    <button
      [disabled]="formGroup.invalid"
      label="Cadastrar"
      pButton
      type="submit"></button>
  </div>
</form>

import { createServer } from "node:http";
import url from "node:url";

const server = createServer((req, res) => {
 const query = url.parse(req.url, true).query;

 res.write(
  JSON.stringify({
   disponivel: query.username === "consolelog",
  })
 );

 res.end();
});

server.listen(3000, () =>
 console.log("API pronta para uso")
);

{
 "name": "api-validacao",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "start": "node index.js"
 },
 "keywords": [],
 "type": "module",
 "author": "",
 "license": "ISC"
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  get(username: string) {
    return this.http.get<{ disponivel: boolean }>(
      `http://localhost:3000/?username=${username}`
    );
  }
}

import {
  AbstractControl,
  AsyncValidatorFn,
  ValidationErrors,
} from '@angular/forms';
import { map, Observable } from 'rxjs';
import { UserService } from './user.service';

export class AppValidator {
  static usernameJaExiste(
    userService: UserService
  ): AsyncValidatorFn {
    // *
    // * Repare que este método retorna
    // * um AsyncValidatorFn.
    // *
    // * No "return" abaixo temos uma função
    // * com a assinatura do AsyncValidatorFn,
    // * que é a seguinte:
    // *
    // * export declare interface AsyncValidatorFn {
    // *   (control: AbstractControl):
    // *     Promise<ValidationErrors | null> |
    // *     Observable<ValidationErrors | null>;
    // * }
    // *
    return (
      control: AbstractControl
    ): Observable<ValidationErrors | null> => {
      // *
      // * Conteúdo do método que é executado cada
      // * vez que o usuário digita algo
      // *

      // * Pega o valor do FormControl:
      const username = control.value;
      
      // * Retorna um Observable resultante
      // * da consulta à API:
      return userService.get(username).pipe(
        // * A API devolve um JSON no seguinte formato:
        // * { "disponivel": true|false }
        //
        // * Abaixo é retornado um novo valor
        // * dependendo do retorno da API.
        map((response) => {
          return response.disponivel
            ? // * Quando não há erros:
              null
            : // * Quando houver erros:
              { usernamejaexiste: username };
        })
      );
    };
  }
}

import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { AppValidator } from './app.validator';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  formGroup: FormGroup = new FormGroup({
    username: new FormControl(
      '',
      [
        Validators.required,
        Validators.pattern(/^[a-z]{3,10}$/),
      ],
      // Validações assíncronas:
      [AppValidator.usernameJaExiste(this.userService)]
    ),
    email: new FormControl('', [
      Validators.required,
      Validators.email,
    ]),
  });

  get username() {
    return this.formGroup.get('username');
  }

  get email() {
    return this.formGroup.get('email');
  }

  // Injeta a UserService para ser utilizada no
  // validador assíncrono do username
  constructor(private userService: UserService) {}

  postar() {
    if (this.formGroup.invalid) {
      return;
    }

    console.log(this.formGroup.value);
  }
}

 <!-- ...(trecho ocultado)... -->

 <!-- VALIDAÇÃO ASSÍNCRONA -->
<div *ngIf="username.errors['usernamejaexiste']">
  <strong>{{
    username.errors["usernamejaexiste"]
  }}</strong>
  não está disponível
</div>

<!-- ...(trecho ocultado)... -->

<div class="col-12">
  <button
    [disabled]="formGroup.invalid || formGroup.pending"
    label="Cadastrar"
    pButton
    type="submit"></button>
</div>

<!-- ...(trecho ocultado)... -->

import {
  AbstractControl,
  AsyncValidatorFn,
  ValidationErrors,
} from '@angular/forms';
import {
  BehaviorSubject,
  debounceTime,
  map,
  Observable,
  switchMap,
  take,
} from 'rxjs';
import { UserService } from './user.service';

export class AppValidator {
  static usernameJaExiste(
    userService: UserService
  ): AsyncValidatorFn {
    const subject = new BehaviorSubject<string>('');

    const output = subject.asObservable().pipe(
      // Só emite um valor quando o intervalo
      // entre as teclas pressionadas for maior
      // que 500ms
      debounceTime(500),
      // Retorna um observable que emite apenas
      // o primeiro valor e então aplica o
      // "completed" do Observable
      take(1),
      // "Troca" o valor emitido, que é o que o
      // usuário digitou, por um novo observable
      // resultante da consulta à API
      switchMap((username: string) =>
        userService.get(username).pipe(
          // Como a API não retorna o "username",
          // utilizamos o "map" para modificar a
          // resposta obtida na consulta à API
          map((apiResponse) => ({
            ...apiResponse,
            username,
          }))
        )
      ),
      map((response) => {
        return response.disponivel
          ? // Se o usuário estiver disponível:
            null
          : // Caso o usuário não esteja disponível,
            // emitimos o erro:
            ({
              usernamejaexiste: response.username,
            } as ValidationErrors);
      })
    );

    return (
      control: AbstractControl
    ): Observable<ValidationErrors | null> => {
      const username = control.value;

      // Sempre que o usuário digitar algo,
      // passamos o valor para o "subject"
      subject.next(username);
      return output;
    };
  }
}