Campo de documento

Um campo que aplica máscara e valida CPF, CNPJ, CEP ou telefone enquanto você digita, com Brazilian Utils em React, Angular, Vue e JavaScript puro.

Um campo que formata enquanto você digita, dentro de um formulário que valida. Cada exemplo roda o código logo abaixo dele, que pode ser copiado do jeito que está.

O campo só aplica a máscara e entrega ao formulário o valor sem ela, com parse*, então o formulário guarda 52998224725 e é isso que o envio manda. Validar é trabalho do formulário, o que também deixa uma mensagem de erro por campo em vez de duas. A máscara é a mesma em todos: um formatter aceita o que já foi digitado, e formatar o que vem antes do cursor diz para onde ele vai, então editar no meio funciona.

O hook é dono do input: ele recebe o formatter e o valor que o formulário guarda, aplica a máscara no que é digitado e avisa pelo próprio onChange. O React nunca escreve o valor do input, que é o que desfaria a máscara. O campo aceita as props do próprio input, então o field do react-hook-form entra inteiro:

Carregando o exemplo…

import { formatCpf, parseCpf } from "@brazilian-utils/brazilian-utils";
import { Field } from "./field";

type CpfFieldProps = {
  /** The CPF without its mask, the way the form holds it. */
  value: string;
  /** Called with the CPF without its mask. */
  onChange: (value: string) => void;
  /** What the form says is wrong with the value, if anything. */
  errorMessage?: string;
};

/** The field of the form, with what makes it a CPF and nothing else. */
export function CpfField(props: CpfFieldProps) {
  return (
    <Field
      {...props}
      label="CPF"
      inputMode="numeric"
      autoComplete="off"
      placeholder="000.000.000-00"
      mask={{ format: formatCpf, parse: parseCpf }}
    />
  );
}

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Um ControlValueAccessor, então aceita formControlName (ou formControl, ou ngModel) como um input nativo, fica touched no blur e desabilita junto com o seu controle. O validador é um ValidatorFn no controle:

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

O valor é o v-model do componente (defineModel), que é onde o defineField do VeeValidate se liga, e a regra fica no schema do formulário:

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Carregando o exemplo…

Carregando o código…

Sem build: salve como um arquivo .html e abra. Ele importa o pacote de um CDN, aplica a máscara no input e valida no submit, levando o foco ao campo que recusou.

Carregando o exemplo…

cpf-field.html

Carregando o código…

Carregando o exemplo…

cnpj-field.html

Carregando o código…

Carregando o exemplo…

cep-field.html

Carregando o código…

Carregando o exemplo…

phone-field.html

Carregando o código…

A referência de utilitários lista todas as funções.