How to delete a field already filled in by clicking on a checkbox? (Angular)-CodePudding

Are you guys ok? In the photo below, when I click on the "I am Brazilian" checkbox, the field below filled with the "CPF" would completely not erase it. At the moment it only erases 1 digit which is the last one, how can I do it? Below is the html code.

Photo Example

<mat-step [stepControl]="personalData" [editable]="true">
 <form [formGroup]="personalData">
  <ng-template matStepLabel>{{'account.signUp.personalData' | translate }}</ng-template>
    <p >{{'account.signUp.personalData' | translate }}</p>
                        <div >
                            <input  formControlName="name" [placeholder]="'account.signUp.fullName' | translate" required>
                            <div  *ngIf="this.personalData?.controls?.name?.invalid && this.personalData?.controls?.name?.value">
                                {{ 'account.signUp.hint.name' | translate }}
                            </div>
                        </div>
    
                        <div >
                            <mat-checkbox formControlName="isBrazilian" [(ngModel)]="isBrazilianCheck" color="primary">
                                {{ 'account.signUp.brazilian' | translate }}
                            </mat-checkbox>
    
                            <mat-radio-group formControlName="person" selected>
                                <mat-radio-button *ngIf="isBrazilianCheck"  [value]="true">{{ 'account.signUp.naturalPerson' | translate }}</mat-radio-button>
                                <mat-radio-button *ngIf="isBrazilianCheck"  [value]="false">{{ 'account.signUp.legalEntity' | translate }}</mat-radio-button>
                            </mat-radio-group>
                        </div>
    
                        <div >
                            <input matInput  formControlName="cpg" [mask]="isBrazilianCheck ? (personalData?.value?.person ? '000.000.000-00' : '00.000.000/0000-00') : ''"
                                    [showMaskTyped]="true" [placeholder]="'account.signUp.insertPassport' | translate" required>
                            <div  *ngIf="(personalData?.controls?.cpg?.invalid && personalData?.controls?.cpg?.value)">
                                {{ 'account.signUp.hint.identification' | translate }}
                            </div>

CodePudding user response：

You should replace the string with an empty one. At the place where you now have the code to remove the last digit.

CodePudding user response：

I created a method inside the component.ts and in the html I put it in the check-box container.

signup.component.ts

public clearInput(): void {
this.personalData.patchValue({cpg: ''});

signup.component.html

<mat-checkbox formControlName="isBrazilian" [(ngModel)]="isBrazilianCheck" color="primary" (change)="clearInput()">
                            {{ 'account.signUp.brazilian' | translate }}
                        </mat-checkbox>

That solved my case.