Validate CPF at Angular 5

Question

Dear, I would like to know how I can validate CPF in angular 5, I have done several searches but so far nothing. I’ve already been able to perform the e-mail validation. Could you help me?

Answer 1

The example of validation that I will present is using Reactive Forms.

Create the Validator that Angular will use for validation. In my case I created the following class with CPF Validator. Remember that the method must return { key: value } when you have error and null when not.

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

In the creation of formGroup we must define the Validator that Angular will use.

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

And then just mount the HTML to display the error. A very simple way to start would be:

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