1

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">
4
  • Seu validator esta vendo se o valor e exatamente 000.000.000-00, se vc digitar esse valor continua com erro? 3/10/2018 às 14:06
  • @EduardoVargas Sim. Qualquer valor que eu digito, o erro permanece. Pelo que vi, o validador customizado não está sendo acionado ao digitar qualquer valor e submeter o formulário. Os outros validadores funcionam normalmente.
    – jflizandro
    3/10/2018 às 14:12
  • O valor do console contem os pontos e traco? 3/10/2018 às 14:15
  • Na verdade o console exibe valor em branco no momento do carregamento da página, mas depois de digitar um valor, não exibe nada no console. Por isso minha desconfiança de que o validador não está sendo acionado.
    – jflizandro
    3/10/2018 às 15:03

3 Respostas 3

2

Mude sua função para:

  static cpf(control: AbstractControl): { [key: string]: any } {
        console.log(control.value);
        if (control.value !== '000.000.000-00') {
            return {cpfInvalido: 'valor recebido: '+control.value};
        }
        return null;
    }

no html:

{{personForm.get('cpf').errors | json }}

E veja se o valor do erro reflete o digitado.

1
  • Fiz da forma que mencionou, mas o valor do campo realmente não está sendo passado e não reflete no "valor recebido".
    – jflizandro
    3/10/2018 às 15:15
1
ValidadorCPF(c:AbstractControl) : {[key:string]:boolean} |  null{
  if (c.value !== '000.000.000-00') {
      return { cpf : true};
    }
    else{
      return null;
    }
  }

Declare no seu typescript essa validação e tente novamente, é a que eu uso no meu sistema... só fiz adptar para o seu.

3
  • Obrigado pela resposta, mas também não funcionou. Considerando todos os exemplos que vi até agora, creio que o validador em si está correto, o problema é que ele não está sendo acionado quando o valor do campo é alterado.
    – jflizandro
    3/10/2018 às 17:13
  • O sua declaração do formulário está onde? Em algum método? E como está a tag form do seu html? 3/10/2018 às 17:24
  • Estou utilizando o FormBuilder no ngOnInit. A tag está da seguinte forma: <form novalidate [formGroup]="personForm" (ngSubmit)="sendForm()">
    – jflizandro
    3/10/2018 às 17:29
0

Descobri o problema. Na verdade minha validação estava correta, mas uma diretiva de máscara de CPF que criei estava causando esse bug. Não sei o motivo, mas ao remover a máscara a validação funcionou perfeitamente.

A diretiva em questão está da seguinte forma:

import {Directive, ElementRef, Input} from '@angular/core';

declare var Inputmask;
@Directive({
  selector: '[mascara]'
})
export class MascaraDirective {

    @Input() mascara: any;
    constructor(private element: ElementRef) {
        setTimeout(() => {
            Inputmask({ // https://github.com/RobinHerbots/Inputmask
                mask: this.mascara,
                skipOptionalPartCharacter: ' '
            }).mask(this.element.nativeElement);
        }, 500);
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .