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.
Utils.onlynumber
por.replace(/\D/g, '')
Eu testei isso replicando seu código e deu certo.