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.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 45f8151d5f..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,12 +100,14 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida } } + private isLegacy = false; private getExampleNumber; private parsePhoneNumberFromString; private baseCode = 127397; private countryCallingCode = '+'; private modelValue: string; private changeSubscriptions: Subscription[] = []; + private validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()]; private propagateChange = (v: any) => { }; @@ -115,15 +121,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); @@ -153,11 +160,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}); } } @@ -183,7 +186,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 +216,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 || this.countryCallingCode === phoneNumber.value ? null : { phoneFormGroup: false }; } @@ -238,6 +241,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.isLegacy = false; + } else { + const validators = [Validators.maxLength(255)]; + if (this.required) { + validators.push(Validators.required); + } + this.phoneFormGroup.get('phoneNumber').setValidators(validators); + this.isLegacy = true; + } + } else { + this.isLegacy = false; + } + this.phoneFormGroup.updateValueAndValidity({emitEvent: false}); country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry; this.getFlagAndPhoneNumberData(country); } @@ -246,7 +267,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 {