Nesse material vamos abordar como utilizar uma validação de dados mais avançada em formulários reativos, iremos abordar a criação de validadores customizados, validadores usando regex e vamos aplicar alguns casos de uso. Vamos também aplicar máscara em campos de dados para forçar a entrada de dados em um determinado formato.
O Regex, ou Regular Expression, é uma string especial que ensina a uma implementação como strings devem ser formatadas para passar na validação, como, por exemplo, um regex poderia instruir que uma string começa com três dígitos, possui um hífen e termina com mais 4 letras. Dessa forma as strings que passem nesse formato irão passar no regex. O regex também é muito utilizado para extrair partes de um texto como, por exemplo, captar todos os e-mails escritos em um documento, extrair números de telefone, entre outros.
A validação de dados em regex é bastante poderosa e pode resolver diversos casos de uso. Alguns dos validadores internos do Angular utilizam regex, como por exemplo, o validador de email.
<aside> 💡 Caso queira mais dicas de como utilizar Regex, acesse esse documento:
</aside>
Em Javascript um regex pode ser instanciado com o objeto RegExp. Exemplo:
No código acima um regex que valida duas palavras com N letras separadas por – como por exemplo: teste-teste.
Um código mais completo poderia ser o seguinte:
Figura 1: Exemplo de utilização de regex
Fonte: Elaborada pelo autor em 2023.
Nesse exemplo vimos em 1 o match na string “esta é a string que contem-oelemento que vai ser procurado-procura com-teste” imprime na tela, em 2 os itens [“contem-oelemento, “procurado-procura”, “com-teste”]. A função match recebeu o regex e extraiu todos os items que batem com o mesmo.
Não precisa se atentar muito ao regex em si pois com o tempo se aprende alguns macetes, e mesmo desenvolvedores experientes tem problemas lendo, entendendo e criando certos regex.
Para iniciarmos vamos ver alguns caracteres especiais de regex: