How to clear the field at Angular?

Question

Look at the gif image;

I am working on an Angular project, what I need is for the user to switch from CPF to CNPJ in addition to performing the fields exchange it can also clear the field when it is exchanged, it is not what happens according to the image.

How do I clear the CPF and CNPJ field when I change the type of person?

I would like to make the change in HTML instead of in the component of the Angular page, note the corresponding code;

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

Answer 1

You’re using the same model -> [(ngModel)]="filtroDevedor.cpfCnpj" for both of us input, so when you type something into the CPF this is stored in the model and when it changes in select to CNPJ the input already comes with the model value, ie the CPF value.

I would like to make the change in HTML instead of in the component of the Angular page

I believe there is no way to do this only in Html, but with few changes you can get the result you want:

HTML: Enter an event function onchange in 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: In function valor() every time you select to change, the variable filtroDevedor.cpfCnpj will be clean:

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