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

Let phone component to accept numbers with spaces, hyphens and parenthesis.

Browse Source
This commit is contained in:
devaskim 2022-10-26 01:35:28 +05:00
parent 4cc7e7b373
commit 6262134b08
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,7 +107,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
private countryCallingCode = '+'; private countryCallingCode = '+';
private modelValue: string; private modelValue: string;
private changeSubscriptions: Subscription[] = []; private changeSubscriptions: Subscription[] = [];
private validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()]; private validators: ValidatorFn[] = [this.validatePhoneNumber()];
private propagateChange = (v: any) => { }; private propagateChange = (v: any) => { };
@ -183,6 +183,10 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
return String.fromCodePoint(...countryCode.split('').map(country => this.baseCode + country.charCodeAt(0))); return String.fromCodePoint(...countryCode.split('').map(country => this.baseCode + country.charCodeAt(0)));
} }
private updateModelValue(parsedPhoneNumber: any) {
this.modelValue = parsedPhoneNumber.format('E.164');
}
validatePhoneNumber(): ValidatorFn { validatePhoneNumber(): ValidatorFn {
return (c: FormControl) => { return (c: FormControl) => {
const phoneNumber = c.value; const phoneNumber = c.value;
@ -194,6 +198,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
valid: false valid: false
} }
}; };
} else {
this.updateModelValue(parsedPhoneNumber);
} }
} }
return null; return null;
@ -210,10 +216,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
} }
} }
private getPhoneNumberPattern(): RegExp {
return new RegExp(`^${this.countryCallingCode.replace('+', '\\+')}$|^\\+[1-9]\\d{1,14}$`);
}
validate(): ValidationErrors | null { validate(): ValidationErrors | null {
const phoneNumber = this.phoneFormGroup.get('phoneNumber'); const phoneNumber = this.phoneFormGroup.get('phoneNumber');
return phoneNumber.valid || this.countryCallingCode === phoneNumber.value ? null : { return phoneNumber.valid || this.countryCallingCode === phoneNumber.value ? null : {
@ -246,6 +248,8 @@ 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()) {
country = parsedPhoneNumber?.country || this.defaultCountry;
this.updateModelValue(parsedPhoneNumber);
this.isLegacy = false; this.isLegacy = false;
} else { } else {
const validators = [Validators.maxLength(255)]; const validators = [Validators.maxLength(255)];
@ -259,7 +263,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
this.isLegacy = false; this.isLegacy = false;
} }
this.phoneFormGroup.updateValueAndValidity({emitEvent: false}); this.phoneFormGroup.updateValueAndValidity({emitEvent: false});
country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry;
this.getFlagAndPhoneNumberData(country); this.getFlagAndPhoneNumberData(country);
} }
this.phoneFormGroup.reset({phoneNumber, country}, {emitEvent: false}); this.phoneFormGroup.reset({phoneNumber, country}, {emitEvent: false});
@ -270,7 +273,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
if (phoneNumber.value === '+' || phoneNumber.value === this.countryCallingCode) { if (phoneNumber.value === '+' || phoneNumber.value === this.countryCallingCode) {
this.propagateChange(null); this.propagateChange(null);
} else if (phoneNumber.valid) { } else if (phoneNumber.valid) {
this.modelValue = phoneNumber.value;
this.propagateChange(this.modelValue); this.propagateChange(this.modelValue);
} else { } else {
this.propagateChange(null); this.propagateChange(null);