Mascaras - angular 2

[guilhermecostalopes]

Estou precisando implementar em um campo mascaras do CNPJ ou CPF, isto é, se for acima de 14 caracteres muda a mascara para CNPJ.

Mesma ideia para telefone, isto é, celular e fixo.

CNPJ, CPF, Telefone, Celular, único eu já vi no npm.

Qual vocês utilizam ?

[felipefialho]

ngx-mask

[guilhermecostalopes]

Obrigado @felipefialho ..

Já vi este. mas como no mesmo campo funcionar para cnpj e cpf ?

Sei que tem o ONBLUR, mas não entendo como implementar, pois temos que colocar no input isto: mask="(000-000)"

Isto que fiquei na dúvida.

No angular 1, trabalhei um sistema que colocávamos no input ui-br-cpfcnpj-mask e já funcionava. no caso este: https://assisrafael.github.io/angular-input-masks/. Mas não achei algo parecido para angular superior.

[guilhermejcgois]

não rola de você fazer com que mask seja uma string e alterar dinamicamente conforme o usuário digita e passa de um determinado length?

[Vitor-Felipe]

Como o @guilhermecostalopes disse, você pode alterar dinamicamente conforme o tamanho do length. .ts:

public cpfcnpjmask = function (rawValue) { var numbers = rawValue.match(/\d/g); var numberLength = 0;

if (numbers) {
  numberLength = numbers.join('').length;
}

if (numberLength <= 11) {
  return [/[0-9]/, /[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '-', /[0-9]/, /[0-9]/];
} else {
  return [/[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '/', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, '-', /[0-9]/, /[0-9]/];
}

}

Vale a pena ressaltar, que é necessário fazer uma validação dos números inseridos, para ter a certeza que o cpf é valido. Como validar cpf

[Vitor-Felipe]

Complementando... Tu pode usar a mesma lógica para fazer as mascaras de telefone e celular, só vai precisar alterar a expressão regular

[guilhermecostalopes]

Sim @guilhermejcgois

[guilhermecostalopes]

@Vitor-Felipe

Fiz assim

  public cpfcnpjmask = function () {
    var numbers = this.usuarioBuscar.login.match(/\d/g);
    var numberLength = 0;
    if (numbers) {
      numberLength = numbers.join('').length;
    }
    if (numberLength <= 11) {
      return [/[0-9]/, /[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '-', /[0-9]/, /[0-9]/];
    } else {
      return [/[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '.', /[0-9]/, /[0-9]/, /[0-9]/, '/', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/, '-', /[0-9]/, /[0-9]/];
    }
  }

No componente html assim:

<input matInput placeholder="Login" name="login" 
[(ngModel)]="usuarioBuscar.login" (keyup)="cpfcnpjmask()"
matTooltip="Login do usuário" maxlength="20">

Mas não funcionou, não faz a mascara

[Vitor-Felipe]

@guilhermecostalopes Tenta usar o html dessa forma: <input type="text" [textMask]="{mask: cpfcnpjmask}" name="cpf" placement="top" [ngModel]="usuarioBuscar.login" class="form-control">

[guilhermecostalopes]

@Vitor-Felipe funcionou. Obrigado.

[nncl]

Olá, sei que essa issue já foi fechada mas recentemente trabalhei com essa aqui ngx-cpf-cnpj e gostaria de compartilhar.

[mumvock]

Olá, sei que essa issue já foi fechada mas recentemente trabalhei com essa aqui ngx-cpf-cnpj e gostaria de compartilhar.

Testei aqui e não funcionou. Há um erro no módulo que mesmo arrumando, não funciona. Utilizo Angular v.8.1

[yuritoledo]

@mumvock

https://youtu.be/r-8isv_TnVA

@fdaciuk ensina de maneira fácil, como construir as suas :)