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

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</ng-template>
    <p class="stepper-title">account.signUp.personalData</p>
                        <div class="wrapper-hint">
                            <input class="input" formControlName="name" [placeholder]="'account.signUp.fullName' | translate" required>
                            <div class="not-match absolute" *ngIf="this.personalData?.controls?.name?.invalid && this.personalData?.controls?.name?.value">
                                account.signUp.hint.name
                            </div>
                        </div>
    
                        <div class="radio-group-signup">
                            <mat-checkbox formControlName="isBrazilian" [(ngModel)]="isBrazilianCheck" color="primary">
                                account.signUp.brazilian
                            </mat-checkbox>
    
                            <mat-radio-group formControlName="person" selected>
                                <mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="true">account.signUp.naturalPerson</mat-radio-button>
                                <mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="false">account.signUp.legalEntity</mat-radio-button>
                            </mat-radio-group>
                        </div>
    
                        <div class="wrapper-hint">
                            <input matInput class="input" 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 class="not-match absolute" *ngIf="(personalData?.controls?.cpg?.invalid && personalData?.controls?.cpg?.value)">
                                account.signUp.hint.identification
                            </div>