Angular 8: CPF/CNPJ field returning empty in editing when changing the mask dynamically with Ngx-Mask!

Asked

Viewed 565 times

0

My input > client.html

<div class="form-group col-lg-2">
    <label for="tipo">Tipo Pessoa:</label>
    <select name="tipo" class="form-control form-control-sm" (change)="aoAlterarTipoPessoa($event.target.value)"
        [(ngModel)]="cliente.tipo" id="tipo">
        <option value="1">FÍSICA</option>
        <option value="2">JURÍDICA</option>
    </select>
</div>

<div class="form-group col-lg-2">
    <label for="cpf"> {{ cpfLabel }} </label>
    <input name="cpf" class="form-control form-control-sm" id="cpf" [mask]="cpfMask" [(ngModel)]="cliente.cpf">
    <span *ngIf="send && !valid && cliente.tipo == 1" class="text-danger">CPF Inválido</span>
    <span *ngIf="send && !valid && cliente.tipo == 2" class="text-danger">CNPJ Inválido</span>
</div>

My job > customer.ts

aoAlterarTipoPessoa(event){
    if(event == 1){
      this.tipoPessoa = true;
      this.cpfLabel = 'CPF:';
      this.rgLabel = 'RG:';
      this.nomeLabel = 'Nome:';
      this.apelidoLabel = 'Apelido:';
      this.cpfMask = '000.000.000-00';
      this.send = false;
      this.valid = null;
    }else{
      this.tipoPessoa = false;
      this.cpfLabel = 'CNPJ:';
      this.rgLabel = 'IE:';
      this.nomeLabel = 'Razão Social:';
      this.apelidoLabel = 'Fantasia:';
      this.cpfMask = "00.000.000/0000-00";
      this.send = false;
      this.valid = null;
    }
  }

ngOnInit method > client.ts

ngOnInit() {
    let codigo = this.route.snapshot.params['id'];     **Aqui pego o codigo passado na url**
    if(codigo){
        this.httpClient.get(this.url.concat(codigo))   **se existir realizo a busca do cliente**
        .pipe(
            map((cliente: any)=>{
                this.aoAlterarTipoPessoa(cliente.tipo);  ** Aqui chamo a função passando o tipo **
                return cliente;
            })
         ).subscribe(
            response => this.cliente = response
         );
    }else{
        this.aoAlterarTipoPessoa(1);
    }
}

The error occurs that when editing a client, the Cpf/cnpj field continues to work the dynamic mask, but the value in the edition comes blank! I was conducting some tests and commenting on the lines this.cpfMask = '000.000.000-00'; and this.cpfMask = "00.000.000/0000-00"; of function aoAlterarTipoPessoa(), values are returned normally, but lose the mask function!

Remembering that when I type the CPF/CNPJ and make the change manually by the selector, the fields do not disappear and the mask keeps working, only comes the empty field of the CPF/CNPJ in the edition!

  • checks if the value is coming as string or number

  • Cpf value comes as string!

  • I solved it a little differently, but I solved it! I am no longer performing the mask dynamically, but using two inputs and using *ngIf to hide or display according to the selected type! <input *ngIf="cliente.tipo == 1" name="cpf" class="form-control form-control-sm" mask="000.000.000-00" [(ngModel)]="cliente.cpf">&#xA; <input *ngIf="cliente.tipo == 2" name="cpf" class="form-control form-control-sm" mask="00.000.000/0000-00" [(ngModel)]="cliente.cpf">

No answers

Browser other questions tagged

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