Angular2+ ngx-Mask deleting value in dynamic mask change

Asked

Viewed 1,533 times

4

I have a document field where the value can be CPF or 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">

I use a function to change the mask dynamically depending on the type of field to be used.

cpfCnpjMask(){

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

  return "00.000.000/0000-00";
}

The insert screen works normally, because when I change the field type it changes the mask and everything is fine. Even if you already have value typed.

The problem happens on the edit screen that when pulling the data from the api it erases the content if the value that is returned is from CPF. With CNPJ works normal.

Because the implementation is done after there is already data in the BD, which were previously recorded with dots, dashes and bars due to a file import, then if it was necessary to clean the returned content leaving only numbers and then perform the verification of which type of doc is based on the amount of characters and thus perform the mask change.

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);            

 });

In input the field is empty when it is CPF.

If I start typing in the field it normally accepts the CPF mask. But for some reason it cannot assign the value. Actually it assigns and seems to erase later. I can’t understand the reason.

  • I’m sorry, but I recommend you use Pipes and components already created for Mask at the angle, there are things that we do not need to create the wheel. Take a look at this link, just install and use, have the step by step documentation and no hassle and headache. https://www.npmjs.com/package/ngx-mask

  • I guess you didn’t read my question and you thought I was trying to reinvent the wheel. That’s not the case, because what you recommended is just what I’m using, which is ngx-Mask. Just read the title!!! And if you read all my explanation you will see that ngx-Mask is having an unexpected behavior in my scenario.

  • Po then, when I needed to make mask for Cpf and tals, I made a function with (input) in html returning the value with the mask (Using Regex) I made here a mode with Regex and one without regex returning CPF (and validating to see if the CPF is true too) https://codesandbox.io/s/validadordecpf-qk66v?file=/src/app/app.component.ts

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.