9

Tenho um component onde preciso que o input possua a mascara para cpf ou cnpj de acordo com a entrada de dados. Estou usando o ng-mask, porém minha validação para a mascara esta funcionando apenas para a primeira validação. Segue abaixo o código. module.ts

import { NgxMaskModule } from 'ngx-mask';

@NgModule({
    declarations: [ .... ], 
    imports: [
        //outros imports
        NgxMaskModule.forRoot(),

    ],

No meu component.ts eu estou utilizando dessa forma o metodo.

@Component({
  selector: 'app-dados-bancarios-professor',
  templateUrl: './dados-bancarios.component.html',
  styleUrls: ['./dados-bancarios.component.scss']
})

//regras de negócio do component
  mask:string;

  cpfcnpjmask() {
    const value = this.dadosBancariosForm.get('cpf_cnpj').value;
    console.log(value, value.length,this.dadosBancariosForm)
    if(value.length <= 14) {
      this.mask = '00.000.000/0000-00'
    }
    else {
      this.mask = '00.000.0000-00'
    }
  }

E por eu uso a mascara da seguinte forma no meu component.html


 <label class="control-label">CPF/CNPJ<span class="text-danger">*</span></label>
 <input type="text" class="form-control form-control-sm" formControlName="cpf_cnpj" [mask]="mask" (keyup)="cpfcnpjmask($event)">

Acontece que ele faz o primeiro bind, mas nao chega a executar a segunda mascara de acordo com o que é inserido pelo usuário. Alguém saberia como resolver esse impasse?

2
  • 2
    Tenta criar um stackblitz do problema, pelo que vi o length nunca vai ser maior que 14, não deveria ser o contrario? Commented 5/12/2019 às 11:38
  • Descobri que a lib brmasker do ionic possui as mascaras e roda normalmente no angular 8 Commented 5/12/2019 às 15:04

4 Respostas 4

5

Na versão do angular 8 o ngx-mask não tem a implamentação do CpfCnpj de forma dinâmica, somente a partir da versão 9 do Angular e usando a versão 9.1.2 do ngx-mask para resolver esse problema.

Para quem quiser acompanhar o que foi discutido e feito segue os links aqui e aqui.

E segundo a própria documentação, essa é a forma que deve ser usado:

<input mask="CPF_CNPJ" />

Ou

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

No seu caso, ficaria da seguinte forma:

<input type="text" class="form-control form-control-sm" formControlName="cpf_cnpj" mask="CPF_CNPJ">
0

Caso alguém passe pela mesma situação a biblioteca do ionic brmasker funciona no Angular8 normalmente e possuir as mascaras.

https://www.npmjs.com/package/brmasker-ionic-3

0

Usei o ngx-mask

Component.html

<input matInput type="text" [mask]="getCpfCnpjMask()" formControlName="cpf_cnpj"
[(ngModel)]="cpf_cnpj" placeholder="Digite o CPF ou CNPJ" required>

Component.ts

isCPF(): boolean{
   return this.cpf_cnpj == null ? true : this.cpf_cnpj.length < 12 ? true : false;
}

getCpfCnpjMask(): string{
   return this.isCPF() ? '000.000.000-009' : '00.000.000/0000-00';
}
-3

brmasker tá descontinuado e o ngx-mask dá erro na minha versão do angular = Angular CLI v12.2.18

Erro: which requires Angular version 14.0.0 or newer to work correctly.

Não posso fazer upgrade da versão do angular, estou usando SimpleMask, mas ela não aceita uma variável ou função, só pattern com regex e eu preciso fazer a máscara funcionar para CPF e CNPJ no mesmo input.

1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 3/12/2022 às 23:38

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 .