Alguem conhece algum componente que aplique mascara e valide CPF para o Angular?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Alguem conhece algum componente que aplique mascara e valide CPF para o Angular?
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;
}