Estou tentando implementar um validador customizado (cpf e cnpj) em um projeto angular utilizando FormBuilder, mas ao testar o validador, o mesmo não consegue pegar o valor do campo.
Criei o validador da seguinte forma (estou testando apenas, então a lógica final não está implementada):
import { AbstractControl, Validators } from '@angular/forms';
export class Validador {
static cpf(control: AbstractControl): { [key: string]: any } {
console.log(control.value);
if (control.value !== '000.000.000-00') {
return {cpf: true};
}
return null;
}
}
O que ocorre é que ao carregar a página do formulário, o console.log é disparado 3 vezes, mas retorna vazio. Se eu digitar qualquer valor no campo (Ex: 111.111.111-11), o validador não é "disparado" novamente e mantém o estado de erro.
O que posso estar fazendo de errado?
Meu FormBuilder está da seguinte forma:
this.personForm = this.fb.group({
name: ['', Validators.required],
cpf: ['', [Validators.required, Validador.cpf]],
phone: ['', Validators.required],
email: ['', [Validators.required, Validators.email, Validators.pattern('^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$')]],
password: ['', Validators.required],
addressStreet: ['', Validators.required],
addressNumber: ['', Validators.required],
addressZipcode: ['', Validators.required],
addressNeighborhood: ['', Validators.required],
addressObservation: ['', Validators.required],
idState: [null, Validators.required],
addressCity: ['', Validators.required],
});
O campo está assim:
<input type="text" class="form-control" placeholder="CPF" formControlName="cpf" mascara="999.999.999-99">