1

Observem a imagem gif;

inserir a descrição da imagem aqui

Estou trabalhando em um projeto Angular, o que preciso é ao usuário trocar de CPF para CNPJ além de realizar a troca dos campos ele possa também limpar o campo quando for trocado, não é o que acontece de acordo com a imagem.

Como faço para limpar o campo CPF e CNPJ quando eu troca o tipo de pessoa?

Eu gostaria de realizar a mudança no HTML invés de ser no componente da pagina Angular, observem o código correspondente;

<div class="form-group col-3 marginTop">
  <label>Tipo de Pessoa</label>
  <select name="tipoPessoa" [(ngModel)]="filtroDevedor.tipoPessoa" class="form-control">
    <option value="F">CPF</option>
    <option value="J">CNPJ</option>
  </select>
</div>

<div class="form-group col-3 inputAjuste">
  <div *ngIf="filtroDevedor.tipoPessoa == 'F'">
    <label class="col-sm-12 col-form-label">CPF</label>
    <div class="col-sm-12">
      <input type="text" maxlength="14" mask="000.000.000-00" class="form-control" name="cpfCnpj"
        [(ngModel)]="filtroDevedor.cpfCnpj" />
    </div>
  </div>
  <div *ngIf="filtroDevedor.tipoPessoa == 'J'">
    <label class="col-sm-12 col-form-label">CNPJ</label>
    <div class="col-sm-12">
      <input type="text" maxlength="18" mask="00.000.000/0000-00" class="form-control" name="cpfCnpj"
        [(ngModel)]="filtroDevedor.cpfCnpj" />
    </div>
  </div>
</div>

1 Resposta 1

0

Você está utilizando o mesmo model -> [(ngModel)]="filtroDevedor.cpfCnpj" para os dois input, logo, quando digita-se algo no CPF isso fica armazenado no model e quando muda no select para CNPJ o input já vem com o valor do model, ou seja, o valor do CPF.

Eu gostaria de realizar a mudança no HTML invés de ser no componente da pagina Angular

Creio não haver como fazer isso só no Html, mas, com poucas mudanças você consegue chegar no resultado que deseja:

HTML: Insira uma função do evento onchange no select:

<div class="form-group col-3 marginTop">
  <label>Tipo de Pessoa</label>
  <select name="tipoPessoa" [(ngModel)]="filtroDevedor.tipoPessoa" class="form-control" (change)="valor()">
    <option value="F">CPF</option>
    <option value="J">CNPJ</option>
  </select>
</div>

<div class="form-group col-3 inputAjuste">
  <div *ngIf="filtroDevedor.tipoPessoa == 'F'">
    <label class="col-sm-12 col-form-label">CPF</label>
    <div class="col-sm-12">
      <input type="text" maxlength="14" mask="000.000.000-00" class="form-control" name="cpfCnpj" [(ngModel)]="filtroDevedor.cpfCnpj" />
    </div>
  </div>
  <div *ngIf="filtroDevedor.tipoPessoa == 'J'">
    <label class="col-sm-12 col-form-label">CNPJ</label>
    <div class="col-sm-12">
      <input type="text" maxlength="18" mask="00.000.000/0000-00" class="form-control" name="cpfCnpj" [(ngModel)]="filtroDevedor.cpfCnpj" />
    </div>
  </div>
</div>

TS: Na função valor() toda as vezes que o select mudar, a variável filtroDevedor.cpfCnpj será limpa:

valor() {
  this.filtroDevedor.cpfCnpj = '';
}

Você deve fazer log-in para responder a esta pergunta.