dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fix enableFlagsSelect input

Browse Source
This commit is contained in:
fe-dev 2022-07-18 12:06:05 +03:00
parent d5d75b1b5e
commit 760dbe063b
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/shared/components/phone-input.component.html
View File

@ -18,7 +18,7 @@
<form [formGroup]="phoneFormGroup"> <form [formGroup]="phoneFormGroup">
<div class="phone-input-container"> <div class="phone-input-container">
<div class="flags-select-container" *ngIf="enableFlagsSelect"> <div class="flags-select-container" *ngIf="showFlagSelect">
<span class="flag-container" *ngIf="!isLoad">{{ flagIcon }}</span> <span class="flag-container" *ngIf="!isLoad">{{ flagIcon }}</span>
<mat-spinner diameter="20" class="flag-loader" *ngIf="isLoad"></mat-spinner> <mat-spinner diameter="20" class="flag-loader" *ngIf="isLoad"></mat-spinner>
<mat-select class="country-select" formControlName="country"> <mat-select class="country-select" formControlName="country">

11
ui-ngx/src/app/shared/components/phone-input.component.ts
View File

@ -77,6 +77,10 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
@Input() @Input()
label = 'phone-input.phone-input-label'; label = 'phone-input.phone-input-label';
get showFlagSelect(): boolean {
return this.enableFlagsSelect && !this.isLegacy;
}
allCountries: Array<Country> = this.countryCodeData.allCountries; allCountries: Array<Country> = this.countryCodeData.allCountries;
phonePlaceholder = '+12015550123'; phonePlaceholder = '+12015550123';
flagIcon: string; flagIcon: string;
@ -96,6 +100,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
} }
} }
private isLegacy = false;
private getExampleNumber; private getExampleNumber;
private parsePhoneNumberFromString; private parsePhoneNumberFromString;
private baseCode = 127397; private baseCode = 127397;
@ -241,17 +246,17 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
if (phoneNumber) { if (phoneNumber) {
const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber);
if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) { if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) {
this.enableFlagsSelect = true; this.isLegacy = false;
} else { } else {
const validators = [Validators.maxLength(255)]; const validators = [Validators.maxLength(255)];
if (this.required) { if (this.required) {
validators.push(Validators.required); validators.push(Validators.required);
} }
this.phoneFormGroup.get('phoneNumber').setValidators(validators); this.phoneFormGroup.get('phoneNumber').setValidators(validators);
this.enableFlagsSelect = false; this.isLegacy = true;
} }
} else { } else {
this.enableFlagsSelect = true; this.isLegacy = false;
} }
this.phoneFormGroup.updateValueAndValidity({emitEvent: false}); this.phoneFormGroup.updateValueAndValidity({emitEvent: false});
country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry; country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry;