3

Possuo um campo de documento em que o valor pode ser de CPF ou CNPJ.

<label for="cnpj" class="label-control">
    <select class="labelSelect" name="tipoDoc" id="tipoDoc" [(ngModel)]="tipoDoc">
       <option value="1">CPF</option>
       <option value="2">CNPJ</option>
    </select>:
</label>
<input type="text" class="form-control form-control-sm" id="cnpj" name="cnpj" [mask]="cpfCnpjMask()" [(ngModel)]="cliente.cnpj">

Uso uma função para trocar a mascara dinamicamente dependendo do tipo de campo a ser utilizado.

cpfCnpjMask(){

  if(this.tipoDoc==1){
    return "000.000.000-00";
  }

  return "00.000.000/0000-00";
}

Na tela de inserir funciona normalmente, pois quando troco o tipo de campo ele troca a mascara e tudo da certo. Mesmo se já tiver valor digitado.

O problema acontece na tela de editar que quando puxa os dados da api ele apaga o conteúdo se o valor que for retornado for de CPF. Com CNPJ funciona normal.

Pelo fato da implementação ser feita depois de já haverem dados no BD, que antes foram gravados com pontos, traços e barras devido a uma importação de arquivo, então se fez necessário limpar o conteúdo retornado deixando somente números para depois então realizar a verificação de que tipo de doc é com base na quantidade de caracteres e assim efetuar a troca da mascara.

this.clienteService.edit(id).subscribe((data) => {
        this.cliente = data['result'];

        // limpa o campo pegando somente os numeros
        let cnpj = Utils.onlyNumbers(this.cliente.cnpj);

        // verifica a qtd de caracteres para determinar se é cpf ou cnpj
        if(cnpj.length === 11){
          // define o tipo de doc como cpf o que aciona a troca da mascara automaticamente
          this.tipoDoc = 1;
        }

        //atribui o cnpj limpo
        this.cliente.cnpj = cnpj;
        // no console log mostra somente os numeros sem problemas
        console.log(this.cliente.cnpj);            

 });

No input o campo fica vazio quando é CPF.

Se eu começar a digitar no campo ele aceita normalmente a mascara de CPF. Mas por algum motivo ele não consegue atribuir o valor. Na verdade ele atribui e parece apagar depois. Não consigo entender o motivo.

4
  • Me desculpe, mas eu recomendo você utilizar pipes e componentes já criados para Mask no angular, tem coisas que não precisamos criar a roda. De uma olhada nesse link, só instalar e utilizar, tem o passo a passo nessa documentação e sem complicação e dor de cabeça. npmjs.com/package/ngx-mask Commented 5/08/2019 às 0:54
  • Acho que você nao leu minha pergunta e já foi achando que eu estava tendando reinventar a roda. Não é o caso, pois o que você recomendou é justamente o que estou usando, que é o ngx-mask. Basta ler o titulo!!! E se ler toda minha explicação verá que o ngx-mask está tendo um comportamento inesperado em meu cenário. Commented 6/08/2019 às 1:19
  • Po então, quando eu precisei fazer máscara para Cpf e tals, eu fiz uma função com (input) no html retornando o valor com a máscara (Utilizando Regex) Fiz aqui um modo com Regex e um sem regex retornando CPF (e validando para ver se o CPF é verdadeiro também) codesandbox.io/s/validadordecpf-qk66v?file=/src/app/… Commented 9/01/2021 às 7:05
  • Posso te sugerir substituir o Utils.onlynumber por .replace(/\D/g, '') Eu testei isso replicando seu código e deu certo. Commented 14/09/2021 às 17:43

2 Respostas 2

1

Dependendo da versão do ngx-mask, você pode usar o "CPF_CNPJ" como mascara, que o ngx-mask faz o trabalho pra você.

<input type="text"
  ... 
 [mask]="CPF_CNPJ"
 [(ngModel)]="cliente.cnpj">

fonte: https://www.npmjs.com/package/ngx-mask#cpf_cnpj-valid-mask

-1

No ngx-mask vc pode usar a seguinte mascara para CPF / CNPJ:

<input mask="000.000.000-00||00.000.000/0000-00" />

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 .