2

Caros, Gostaria de saber como posso validar o e-mail e CPF em angular 5.

Fiz o codigo básico:

<mat-form-field class="full-width">
    <input matInput placeholder="E-mail" [formControl]="emailFormControl" [(ngModel)]="email">
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
        Por favor entre com um endereço de e-mail valido
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
        E-mail é
        <strong>requirido</strong>
    </mat-error>
</mat-form-field>

<mat-form-field class="full-width">

    <input matInput placeholder="CPF" [formControl]="cpfFormControl" [(ngModel)]="cpf">
    <mat-error *ngIf="cpfFormControl.hasError('required')">
        CPF é
        <strong>requirido</strong>
    </mat-error>
</mat-form-field>

<button mat-button type="submit" class="btn btn-primary btn-lg btn-block button-size" (click)="Logar()">Enviar</button>
4
  • Você quer validar a máscara do CPF apenas ou validar se o CPF está correto pelo cálculo de validação?
    – Gaspar
    Commented 2/10/2018 às 19:54
  • Olá, gostaria de validar se o CPF está correto pelo cálculo de validação.
    – Marck
    Commented 3/10/2018 às 11:37
  • Bem vindo ao StackOverflow. Criei um projeto básico no StackBlitz aqui para facilitar a demonstração de alguma resposta, fiquem a vontade para fazer fork.
    – Gaspar
    Commented 3/10/2018 às 13:06
  • O projeto não esta funcionando
    – Marck
    Commented 5/10/2018 às 14:25

2 Respostas 2

2

Eu particularmente gosto de utilizar Reactive Forms para o desenvolvimento em Angular. 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(): ValidatorsFn {
     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>
    <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>
0

Corrigir na validação do tamanho:

if (cpf.length !== 11) { return { cpfNotValid: true }; }

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 .