Validar registro vindo do banco

E aí, Emerson!

Se você quer explorar outras opções sem usar a mensagem diretamente no template, você pode considerar usar um serviço para lidar com as validações assincronamente.

Você pode criar um serviço que faz a verificação no backend e retorna um Observable com a resposta. Depois, você pode usar operadores como debounceTime para evitar muitas requisições em tempo real e switchMap para garantir que apenas a resposta mais recente seja considerada.

No seu componente, você pode se inscrever nesse Observable e atualizar o estado do formulário com base na resposta do servidor.

Algo assim no seu serviço:

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

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

  verificarExistenciaUsuario(userName: string): Observable<boolean> {
    return this.http.get<boolean>(`/api/verificarUsuario/${userName}`).pipe(
      map(response => response)
    );
  }
}

E no seu componente:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ValidacaoService } from 'caminho-do-seu-servico';

@Component({
  selector: 'app-seu-componente',
  templateUrl: './seu-componente.component.html',
  styleUrls: ['./seu-componente.component.css']
})
export class SeuComponente {
  novoUsuarioForm: FormGroup;

  constructor(private fb: FormBuilder, private validacaoService: ValidacaoService) {
    this.novoUsuarioForm = this.fb.group({
      userName: ['', Validators.required],
      // ... outros campos do formulário
    });

    this.novoUsuarioForm.get('userName').valueChanges
      .pipe(
        debounceTime(300),
        switchMap(userName => this.validacaoService.verificarExistenciaUsuario(userName))
      )
      .subscribe(usuarioExistente => {
        if (usuarioExistente) {
          this.novoUsuarioForm.get('userName').setErrors({ usuarioExistente: true });
        } else {
          this.novoUsuarioForm.get('userName').setErrors(null);
        }
      });
  }
}

Lembre de adaptar isso ao seu backend e às suas necessidades específicas. E sempre teste bem para garantir que tudo está funcionando como esperado.