From fcb15bf99c687f3d2fe8033114758a26ea9e8f39 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Thu, 14 Jul 2022 18:13:47 +0300 Subject: [PATCH 1/3] UI: Fixed first loading and validation --- ui-ngx/src/app/shared/components/phone-input.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 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 45f8151d5f..1be1e20d29 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -92,6 +92,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.isLoading = value; if (this.phoneFormGroup) { this.defineCountryFromNumber(this.phoneFormGroup.get('phoneNumber').value); + this.getFlagAndPhoneNumberData(this.phoneFormGroup.get('country').value); } } } @@ -183,7 +184,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida validatePhoneNumber(): ValidatorFn { return (c: FormControl) => { const phoneNumber = c.value; - if (phoneNumber && this.countryCallingCode !== phoneNumber && this.parsePhoneNumberFromString) { + if (phoneNumber && this.parsePhoneNumberFromString) { const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); if (!parsedPhoneNumber?.isValid() || !parsedPhoneNumber?.isPossible()) { return { @@ -213,7 +214,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida validate(): ValidationErrors | null { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); - return phoneNumber.valid || phoneNumber.untouched || this.countryCallingCode === phoneNumber.value ? null : { + return phoneNumber.valid ? null : { phoneFormGroup: false }; } From d5d75b1b5ea56616680cd46bdf4e1c8aeab8966d Mon Sep 17 00:00:00 2001 From: fe-dev Date: Mon, 18 Jul 2022 11:40:49 +0300 Subject: [PATCH 2/3] UI: Refactoring --- .../shared/components/contact.component.html | 2 +- .../components/phone-input.component.ts | 39 +++++++++++++------ 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/ui-ngx/src/app/shared/components/contact.component.html b/ui-ngx/src/app/shared/components/contact.component.html index 2776c88863..d3e6c474d0 100644 --- a/ui-ngx/src/app/shared/components/contact.component.html +++ b/ui-ngx/src/app/shared/components/contact.component.html @@ -57,7 +57,7 @@ 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 1be1e20d29..2f055bbb59 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -92,7 +92,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.isLoading = value; if (this.phoneFormGroup) { this.defineCountryFromNumber(this.phoneFormGroup.get('phoneNumber').value); - this.getFlagAndPhoneNumberData(this.phoneFormGroup.get('country').value); } } } @@ -103,6 +102,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 propagateChange = (v: any) => { }; @@ -116,15 +116,16 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } ngOnInit(): void { - const validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()]; if (this.required) { - validators.push(Validators.required); + this.validators.push(Validators.required); } this.phoneFormGroup = this.fb.group({ country: [this.defaultCountry, []], - phoneNumber: [null, validators] + phoneNumber: [null, this.validators] }); + this.flagIcon = this.getFlagIcon(this.phoneFormGroup.get('country').value); + this.changeSubscriptions.push(this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { this.updateModel(); this.defineCountryFromNumber(value); @@ -154,11 +155,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida focus() { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); if (!phoneNumber.value) { - phoneNumber.patchValue(this.countryCallingCode, {emitEvent: false}); - } - if (phoneNumber.untouched && this.countryCallingCode !== phoneNumber.value) { - phoneNumber.markAsTouched(); - phoneNumber.updateValueAndValidity(); + phoneNumber.patchValue(this.countryCallingCode, {emitEvent: true}); } } @@ -214,7 +211,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida validate(): ValidationErrors | null { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); - return phoneNumber.valid ? null : { + return phoneNumber.valid || this.countryCallingCode === phoneNumber.value ? null : { phoneFormGroup: false }; } @@ -239,6 +236,24 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida this.modelValue = phoneNumber; let country = this.defaultCountry; if (this.parsePhoneNumberFromString) { + this.phoneFormGroup.get('phoneNumber').clearValidators(); + this.phoneFormGroup.get('phoneNumber').setValidators(this.validators); + if (phoneNumber) { + const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); + if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) { + this.enableFlagsSelect = true; + } else { + const validators = [Validators.maxLength(255)]; + if (this.required) { + validators.push(Validators.required); + } + this.phoneFormGroup.get('phoneNumber').setValidators(validators); + this.enableFlagsSelect = false; + } + } else { + this.enableFlagsSelect = true; + } + this.phoneFormGroup.updateValueAndValidity({emitEvent: false}); country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry; this.getFlagAndPhoneNumberData(country); } @@ -247,7 +262,9 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida private updateModel() { const phoneNumber = this.phoneFormGroup.get('phoneNumber'); - if (phoneNumber.valid) { + if (phoneNumber.value === '+' || phoneNumber.value === this.countryCallingCode) { + this.propagateChange(null); + } else if (phoneNumber.valid) { this.modelValue = phoneNumber.value; this.propagateChange(this.modelValue); } else { From 760dbe063b673c33d6f060645c30b361d3f36598 Mon Sep 17 00:00:00 2001 From: fe-dev Date: Mon, 18 Jul 2022 12:06:05 +0300 Subject: [PATCH 3/3] UI: Fix enableFlagsSelect input --- .../app/shared/components/phone-input.component.html | 2 +- .../app/shared/components/phone-input.component.ts | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html index 87ce1f6c1b..4a7b36b50e 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.html +++ b/ui-ngx/src/app/shared/components/phone-input.component.html @@ -18,7 +18,7 @@
-
+
{{ flagIcon }} 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 2f055bbb59..238f3c7134 100644 --- a/ui-ngx/src/app/shared/components/phone-input.component.ts +++ b/ui-ngx/src/app/shared/components/phone-input.component.ts @@ -77,6 +77,10 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida @Input() label = 'phone-input.phone-input-label'; + get showFlagSelect(): boolean { + return this.enableFlagsSelect && !this.isLegacy; + } + allCountries: Array = this.countryCodeData.allCountries; phonePlaceholder = '+12015550123'; flagIcon: string; @@ -96,6 +100,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } } + private isLegacy = false; private getExampleNumber; private parsePhoneNumberFromString; private baseCode = 127397; @@ -241,17 +246,17 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida if (phoneNumber) { const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) { - this.enableFlagsSelect = true; + this.isLegacy = false; } else { const validators = [Validators.maxLength(255)]; if (this.required) { validators.push(Validators.required); } this.phoneFormGroup.get('phoneNumber').setValidators(validators); - this.enableFlagsSelect = false; + this.isLegacy = true; } } else { - this.enableFlagsSelect = true; + this.isLegacy = false; } this.phoneFormGroup.updateValueAndValidity({emitEvent: false}); country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry;