Customized Validator 2/4

Question

Customized Validator 2/4

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I am trying to implement a custom validator (cpf and cnpj) on an angular project using FormBuilder, but when testing the validator, it can not get the value of the field.

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 enter any value in the field (Ex: 111.111.111-11), the validator is not "fired" again and keeps the error state.

What can I be doing wrong?

My FormBuilder looks like this:

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 field looks like this:

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

angular

asked by anonymous 03.10.2018 / 15:57

3 answers

2

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

no html:

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

And see if the error value reflects the typed one.

03.10.2018 / 16:22

1

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, it's the one I use on my system ... I just did adptar for yours.

03.10.2018 / 18:48

Undefined offset 0 - Laravel Java returning 0 in multiplication

score 0 · Accepted Answer

I discovered the problem. Actually my validation was correct, but a CPF mask directive that I created was causing this bug. I do not know why, but removing the mask validation worked perfectly.

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