Customized Angular 2/4 validator

Question

I’m trying to implement a custom validator (Cpf and cnpj) in an angular project using Formbuilder, but when testing the validator, it can’t get the field value.

I created the validator as follows (I am testing only, so the final logic is not implemented):

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;
    }
}

What happens is that when loading the form page, the console.log is fired 3 times, but returns empty. If I type any value in the field (Ex: 111.111.111-11), the validator is not "triggered" again and maintains the error state.

What could I be doing wrong?

My Formbuilder is as follows:

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],
});

The country is like this:

<input type="text" class="form-control" placeholder="CPF" formControlName="cpf" mascara="999.999.999-99">

Answer 1

Change your function to:

  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;
    }

in html:

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

And see if the error value reflects the typed.

Answer 2

ValidadorCPF(c:AbstractControl) : {[key:string]:boolean} |  null{
  if (c.value !== '000.000.000-00') {
      return { cpf : true};
    }
    else{
      return null;
    }
  }

Declare in your typescript this validation and try again, is the one I use on my system... I just made adptar for your.

Answer 3

I found the problem. Actually my validation was correct, but a CPF mask directive I created was causing this bug. I don’t know why, but when removing the mask the validation worked perfectly.

The directive in question is as follows::

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);
    }
}