From 6262134b0854d953aa49856046644ade4305149a Mon Sep 17 00:00:00 2001 From: devaskim Date: Wed, 26 Oct 2022 01:35:28 +0500 Subject: [PATCH 1/2] Let phone component to accept numbers with spaces, hyphens and parenthesis. --- .../shared/components/phone-input.component.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts index a620fa6263..5f17195cf3 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -107,7 +107,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida private countryCallingCode = '+'; private modelValue: string; private changeSubscriptions: Subscription[] = []; - private validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()]; + private validators: ValidatorFn[] = [this.validatePhoneNumber()]; 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))); } + private updateModelValue(parsedPhoneNumber: any) { + this.modelValue = parsedPhoneNumber.format('E.164'); + } + validatePhoneNumber(): ValidatorFn { return (c: FormControl) => { const phoneNumber = c.value; @@ -194,6 +198,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida valid: false } }; + } else { + this.updateModelValue(parsedPhoneNumber); } } 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 { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); return phoneNumber.valid || this.countryCallingCode === phoneNumber.value ? null : { @@ -246,6 +248,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida if (phoneNumber) { const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) { + country = parsedPhoneNumber?.country || this.defaultCountry; + this.updateModelValue(parsedPhoneNumber); this.isLegacy = false; } else { const validators = [Validators.maxLength(255)]; @@ -259,7 +263,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.isLegacy = false; } this.phoneFormGroup.updateValueAndValidity({emitEvent: false}); - country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry; this.getFlagAndPhoneNumberData(country); } 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) { this.propagateChange(null); } else if (phoneNumber.valid) { - this.modelValue = phoneNumber.value; this.propagateChange(this.modelValue); } else { this.propagateChange(null); From 98cad2d1402fa015d4dc5a06e6c2b3ca819956af Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 2 Nov 2022 17:23:33 +0200 Subject: [PATCH 2/2] UI: Refactoring code --- .../components/phone-input.component.ts | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts index 5f17195cf3..ebe96de53d 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -94,8 +94,9 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida set isLoad(value) { if (this.isLoading) { this.isLoading = value; - if (this.phoneFormGroup) { - this.defineCountryFromNumber(this.phoneFormGroup.get('phoneNumber').value); + if (this.phoneFormGroup && this.phoneFormGroup.get('phoneNumber').value) { + const parsedPhoneNumber = this.parsePhoneNumberFromString(this.phoneFormGroup.get('phoneNumber').value); + this.defineCountryFromNumber(parsedPhoneNumber); } } } @@ -132,8 +133,12 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.flagIcon = this.getFlagIcon(this.phoneFormGroup.get('country').value); this.changeSubscriptions.push(this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { - this.updateModel(); - this.defineCountryFromNumber(value); + let parsedPhoneNumber = null; + if (value && this.parsePhoneNumberFromString) { + parsedPhoneNumber = this.parsePhoneNumberFromString(value); + this.defineCountryFromNumber(parsedPhoneNumber); + } + this.updateModel(parsedPhoneNumber); })); this.changeSubscriptions.push(this.phoneFormGroup.get('country').valueChanges.subscribe(value => { @@ -183,7 +188,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida return String.fromCodePoint(...countryCode.split('').map(country => this.baseCode + country.charCodeAt(0))); } - private updateModelValue(parsedPhoneNumber: any) { + private updateModelValueInFormat(parsedPhoneNumber: any) { this.modelValue = parsedPhoneNumber.format('E.164'); } @@ -198,21 +203,16 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida valid: false } }; - } else { - this.updateModelValue(parsedPhoneNumber); } } return null; }; } - private defineCountryFromNumber(phoneNumber) { - if (phoneNumber && this.parsePhoneNumberFromString) { - const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); - const country = this.phoneFormGroup.get('country').value; - if (parsedPhoneNumber?.country && parsedPhoneNumber?.country !== country) { - this.phoneFormGroup.get('country').patchValue(parsedPhoneNumber.country, {emitEvent: true}); - } + private defineCountryFromNumber(parsedPhoneNumber) { + const country = this.phoneFormGroup.get('country').value; + if (parsedPhoneNumber?.country && parsedPhoneNumber?.country !== country) { + this.phoneFormGroup.get('country').patchValue(parsedPhoneNumber.country, {emitEvent: true}); } } @@ -249,7 +249,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) { country = parsedPhoneNumber?.country || this.defaultCountry; - this.updateModelValue(parsedPhoneNumber); + this.updateModelValueInFormat(parsedPhoneNumber); this.isLegacy = false; } else { const validators = [Validators.maxLength(255)]; @@ -268,11 +268,14 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.phoneFormGroup.reset({phoneNumber, country}, {emitEvent: false}); } - private updateModel() { + private updateModel(parsedPhoneNumber?) { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); if (phoneNumber.value === '+' || phoneNumber.value === this.countryCallingCode) { this.propagateChange(null); } else if (phoneNumber.valid) { + if (parsedPhoneNumber) { + this.updateModelValueInFormat(parsedPhoneNumber); + } this.propagateChange(this.modelValue); } else { this.propagateChange(null);