2
respostas

Validação e Mascara CPF

Alguem conhece algum componente que aplique mascara e valide CPF para o Angular?

2 respostas

Boa tarde. Já tentou o text mask?

https://github.com/text-mask/text-mask/tree/master/angular2

Se não engano, algum aluno utilizou e curtiu bastante.

Se não achar algum que lhe satisfaça, crie o seu, o Angular é bom pra fazer isso, com as diretivas e afins! Não esquece de disponibilizar pra galera depois ;D

Pra ajudar (se ajudar) vai um código pra uma máscara de cpf e cnpj com Regex, restaria a você fazer a validação!

import { Directive, ElementRef, Input, HostListener, Output, EventEmitter } from '@angular/core';
import { ConverterService } from "../service/converter.service";

declare var $:any;

@Directive({ selector: '[cpf-cnpj]' })
export class CpfCnpjDirective {

    @Output() 
    onPressEnter: EventEmitter<any> = new EventEmitter();

    input:any;
    converter:ConverterService = new ConverterService();

    arrayNumber:any[] = ["0","1","2","3","4","5","6","7","8","9"];
    arrayFunction:any[] = [, "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]

    constructor(private el: ElementRef) {}

    ngAfterViewInit(){
        this.input = $($(this.el.nativeElement).find('input')[0]);
    }

    @HostListener('keyup', ['$event']) onKeyUp(event: KeyboardEvent) {

        if (event.key == "Enter")
            this.onPressEnter.emit();

        else if (this.arrayFunction.indexOf(event.key) < 0) 
            this.input.val(this.converter.convertToCpfCnpj(this.input.val()));
    }
}

E o método que faz a mágica acontecer:

convertToCpfCnpj(num) {
        if (num) {
            num = num.toString();
            num = num.replace(/\D/g, "");

            switch (num.length) {
                case 4:
                    num = num.replace(/(\d+)(\d{3})/, " $1.$2");
                    break;
                case 5:
                    num = num.replace(/(\d+)(\d{3})/, " $1.$2");
                    break;
                case 6:
                    num = num.replace(/(\d+)(\d{3})/, " $1.$2");
                    break;
                case 7:
                    num = num.replace(/(\d+)(\d{3})(\d{3})/, " $1.$2.$3");
                    break;
                case 8:
                    num = num.replace(/(\d+)(\d{3})(\d{3})/, " $1.$2.$3");
                    break;
                case 9:
                    num = num.replace(/(\d+)(\d{3})(\d{3})/, " $1.$2.$3");
                    break;
                case 10:
                    num = num.replace(/(\d+)(\d{3})(\d{3})(\d{1})/, " $1.$2.$3-$4");
                    break;
                case 11:
                    num = num.replace(/(\d+)(\d{3})(\d{3})(\d{2})/, " $1.$2.$3-$4");
                    break;
                case 12:
                    num = num.replace(/(\d+)(\d{3})(\d{3})(\d{4})/, " $1.$2.$3/$4");
                    break;
                case 13:
                    num = num.replace(/(\d+)(\d{3})(\d{3})(\d{4})(\d{2})/, " $1.$2.$3/$4-$5");
                    break;
                case 14:
                    num = num.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d+)/, " $1.$2.$3/$4-$5");
                    break;
            }
        }
        return num;
    }

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software