Validators no Angular - criando Validators personalizados

O que são Validators no Angular?

Validators são funções que avaliam se um valor atende a determinados critérios de validação. No contexto do Angular, os Validators são comumente usados para validar os dados em formulários reativos. Eles podem ser aplicados a campos específicos ou a todo o formulário.

Usando Validators em Formulários:

Vamos dar uma olhada em como você pode começar a usar Validators em seus formulários Angular.

1. Importando Validators:
Para começar, importe Validators do pacote @angular/forms no seu componente.
import { Validators } from '@angular/forms';

2. Aplicando Validators a Campos:
Você pode usar Validators predefinidos, como Validators.required, Validators.email, etc., para validar campos específicos. Exemplo:

formCadastroProduto = new FormGroup({
    nome: new FormControl('', [Validators.required, Validators.minLength(4)]),
    email: new FormControl('', [Validators.required,Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]),
    password: new FormControl('', [Validators.required, Validators.minLength(8)]),
  })

3. Validações Personalizadas:
Além dos Validators predefinidos, você pode criar suas próprias funções de validação personalizadas.

• Crie uma pasta Validacoes com um arquivo novo para criar sua validação personalizada:

• Neste arquivo, é necessário importar Alguns itens do pacote @angular/forms:
  import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
• Como exemplo, criarei um validator para validar se a senha contém caracteres minúsculos, maíusculos e numéricos:

// Função que retorna um ValidatorFn
export function criarSenhaForte(): ValidatorFn {

  // Retorna a função do ValidatorFn
  return (control: AbstractControl): ValidationErrors | null => {

    // Obtém o valor do campo de senha
    const value = control.value;

    // Se o valor for nulo ou vazio, retorna null
    if (!value) {
      return null;
    }

    // Verifica se o valor contém pelo menos um caractere maiúsculo
    const temCaracterMaiusculo = /[A-Z]+/.test(value);

    // Verifica se o valor contém pelo menos um caractere minúsculo
    const temCaracterMinusculo = /[a-z]+/.test(value);

    // Verifica se o valor contém pelo menos um caractere numérico
    const temCaracterNumerico = /[0-9]+/.test(value);

    // Verifica se a senha atende aos critérios definidos
    const senhaValida = temCaracterNumerico && temCaracterMinusculo && temCaracterMaiusculo;

    // Se a senha não for válida, retorna um objeto com a chave 'senhaForte'
    // Caso contrário, retorna null indicando que a validação passou
    return !senhaValida ? { senhaFraca: true } : null;
  };
}

• Após criar o arquivo, acrescente aos validators no componente o novo Validator criado:

formCadastroProduto = new FormGroup({
    nome: new FormControl('', [Validators.required, Validators.minLength(4)]),
    email: new FormControl('', [Validators.required,Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")]),
    password: new FormControl('', [Validators.required, Validators.minLength(8), criarSenhaForte()]),
  })

Aplicando validações no template:

Para que as validações sejam visíveis, precisamos aplicar ao formulário HTML os textos de erro.
Aqui estou usando angular material.
Utilizamos a diretiva *ngIf para aplicar uma mensagem customizada para cada validação.

<mat-form-field class="example-full-width">
    <mat-label>Senha</mat-label>
    <input matInput placeholder="Senha" formControlName="password" >
    <mat-error *ngIf="formCadastroProduto.controls.password.hasError('required')">Favor informe uma senha</mat-error>
    <mat-error *ngIf="formCadastroProduto.controls.password.hasError('minlength')">A senha tem que ter pelo menos 8 caracteres</mat-error>
    <mat-error *ngIf="formCadastroProduto.controls.password.hasError('senhaFraca')">A senha deve conter caracteres minusculos, maiúsculos e numéricos</mat-error>
  </mat-form-field>

Como resultado teremos:

Espero que seja útil para vocês!