tanansatpal / ngx-mat-intl-tel-input

MIT License
62 stars 112 forks source link

Template driven form - Field doesn't get empty on model change. #124

Open hmzaabasi opened 3 years ago

hmzaabasi commented 3 years ago

I'm using the template-driven forms and while changing the ngModel value the phone number doesn't get empty if the new value is empty. In my scenario, I'm maintaining employee data as drafted data. image The toggle is used to switch between drafted and non-drafted data. If the non-drafted employee has a phone number while in drafted data we removed that phone number the form is not changing the field value image The image below shows the drafted data and both phone numbers should be empty but they're not. image

Code:

            <mat-form-field>
              <ngx-mat-intl-tel-input [cssClass]="'custom'" [preferredCountries]="['dk', 'ca']"
                [(ngModel)]="employeeModel.telephoneNumber" [enablePlaceholder]="true" [enableSearch]="true"
                [searchPlaceholder]="'Search...'" [placeholder]="['EnterPhoneNumber'|translate]"
                #telephoneNumber="ngModel" name="telephoneNumber">
              </ngx-mat-intl-tel-input>
              <mat-error *ngIf="!telephoneNumber.valid">{{'Common.PhoneValidationMessage'| translate}} </mat-error>
            </mat-form-field>

            <mat-form-field>
              <ngx-mat-intl-tel-input [cssClass]="'custom'" [preferredCountries]="['dk', 'ca']"
                [(ngModel)]="employeeModel.optionalPhoneNo" [enablePlaceholder]="true" [enableSearch]="true"
                [searchPlaceholder]="'Search...'" [placeholder]="['SecondaryPhoneNumber'|translate]"
                #optionalPhoneNo="ngModel" name="optionalPhoneNo"></ngx-mat-intl-tel-input>
              <mat-error *ngIf="!optionalPhoneNo.valid">{{'Common.PhoneValidationMessage'| translate}} </mat-error>
            </mat-form-field>

Tried these solutions but nothing helped.

LoadData(event, form: NgForm) {
    form.control.reset();
    form.controls['telephoneNumber'].reset();
    form.controls['telephoneNumber'].setValue("");
    console.log(form.controls['telephoneNumber']);
}
rbalet commented 1 month ago

@hmzaabasi Should be fixed in this library clone