'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' | translate }}</ng-template>
    <p class="stepper-title">{{'account.signUp.personalData' | translate }}</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' | translate }}
                            </div>
                        </div>
    
                        <div class="radio-group-signup">
                            <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" class="small-label" [value]="true">{{ 'account.signUp.naturalPerson' | translate }}</mat-radio-button>
                                <mat-radio-button *ngIf="isBrazilianCheck" class="small-label" [value]="false">{{ 'account.signUp.legalEntity' | translate }}</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' | translate }}
                            </div>
htmlangulartypescriptcheckbox


Solution 1:[1]

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Erik Leusink
Solution 2

Related Questions