3

Caros, Gostaria de saber como posso validar CPF em angular 5, já realizei varias pesquisas mas ate agora nada. Já consegui realizar a validação de e-mail. Poderia me ajudar?

1
  • Onde está seu código?
    – Renan
    Commented 5/10/2018 às 16:57

1 Resposta 1

11

O exemplo de validação que vou aprensentar é utilizando Reactive Forms.

Crie o validator que o Angular utilizará para a validação. No meu caso eu criei a seguinte classe com o validator do CPF. Lembre-se que o método deve retornar { chave: valor } quando tiver error e null quando não.

export class GenericValidator {
   constructor() {}

   /**
    * Valida se o CPF é valido. Deve-se ser informado o cpf sem máscara.
   */
   static isValidCpf() {
     return (control: AbstractControl): Validators => {
       const cpf = control.value;
       if (cpf) {
         let numbers, digits, sum, i, result, equalDigits;
         equalDigits = 1;
         if (cpf.length < 11) {
          return null;
         }

         for (i = 0; i < cpf.length - 1; i++) {
           if (cpf.charAt(i) !== cpf.charAt(i + 1)) {
             equalDigits = 0;
             break;
           }
         }

         if (!equalDigits) {
           numbers = cpf.substring(0, 9);
           digits = cpf.substring(9);
           sum = 0;
           for (i = 10; i > 1; i--) {
             sum += numbers.charAt(10 - i) * i;
           }

           result = sum % 11 < 2 ? 0 : 11 - (sum % 11);

           if (result !== Number(digits.charAt(0))) {
             return { cpfNotValid: true };
           }
           numbers = cpf.substring(0, 10);
           sum = 0;

           for (i = 11; i > 1; i--) {
             sum += numbers.charAt(11 - i) * i;
           }
           result = sum % 11 < 2 ? 0 : 11 - (sum % 11);

           if (result !== Number(digits.charAt(1))) {
             return { cpfNotValid: true };
           }
           return null;
         } else {
           return { cpfNotValid: true };
         }
      }
    return null;
  };
}

Na criação do formGroup deve-se setar o validator que o Angular utilizará.

export class formComponent implements OnInit {
  form: formGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      cpf: this.formBuilder.control({ value: null, disabled: false}, GenericValidator.isValidCpf())
    })
  }
}

E depois é só montar o HTML para exibir o erro. Uma forma bem simples para iniciar seria:

<form [formGroup]="form">
    <div>
      <label>CPF</label>
      <input type="text" formControlName="cpf"/>
    </div>
    <div *ngIf="form.get('cpf').getError('cpfNotValid')"> 
      O cpf não é válido.
    </div>
</form>

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