From d00154c1abb7f89c3b2ff6cc4e3704678f598d70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Balet?= Date: Sun, 13 Oct 2024 15:29:55 +0200 Subject: [PATCH 1/2] fix(validator): type value --- package.json | 2 +- projects/ngx-mat-input-tel/package.json | 2 +- .../ngx-mat-input-tel/src/lib/ngx-mat-input-tel.validator.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ee20f9a41..273508510 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mat-input-tel", - "version": "18.5.2", + "version": "18.5.3", "scripts": { "ng": "ng", "start": "ng serve", diff --git a/projects/ngx-mat-input-tel/package.json b/projects/ngx-mat-input-tel/package.json index 53a892054..9abc6f226 100644 --- a/projects/ngx-mat-input-tel/package.json +++ b/projects/ngx-mat-input-tel/package.json @@ -1,6 +1,6 @@ { "name": "ngx-mat-input-tel", - "version": "18.5.2", + "version": "18.5.3", "author": { "name": "Raphaël Balet", "email": "raphael.balet@outlook.com" diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.validator.ts b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.validator.ts index 01da4338d..8dec4edfd 100644 --- a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.validator.ts +++ b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.validator.ts @@ -1,7 +1,7 @@ -import { FormControl } from '@angular/forms' +import { AbstractControl, ValidationErrors } from '@angular/forms' import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js' -export const ngxMatInputTelValidator = (control: FormControl) => { +export const ngxMatInputTelValidator = (control: AbstractControl): ValidationErrors | null => { const error = { validatePhoneNumber: true } let numberInstance: PhoneNumber From 4db4336bea0b700e35b55e78724abd9d2a162c7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Balet?= Date: Mon, 14 Oct 2024 08:36:31 +0200 Subject: [PATCH 2/2] refactor(component): into components --- .../src/lib/ngx-mat-input-tel.component.ts | 86 +++++++++++-------- 1 file changed, 48 insertions(+), 38 deletions(-) diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts index 9e227751e..5c4e59fe5 100644 --- a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts +++ b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts @@ -225,20 +225,23 @@ export class NgxMatInputTelComponent this.allCountries = this.allCountries.filter((c) => this.onlyCountries.includes(c.iso2)) } - if (this.numberInstance && this.numberInstance.country) { + this._setDefaultCountry() + + this._changeDetectorRef.markForCheck() + this.stateChanges.next() + } + + private _setDefaultCountry() { + if (this.numberInstance?.country) { // If an existing number is present, we use it to determine selectedCountry this.selectedCountry = this.getCountry(this.numberInstance.country) + } else if (this.preferredCountriesInDropDown.length) { + this.selectedCountry = this.preferredCountriesInDropDown[0] } else { - if (this.preferredCountriesInDropDown.length) { - this.selectedCountry = this.preferredCountriesInDropDown[0] - } else { - this.selectedCountry = this.allCountries[0] - } + this.selectedCountry = this.allCountries[0] } this.countryChanged.emit(this.selectedCountry) - this._changeDetectorRef.markForCheck() - this.stateChanges.next() } ngDoCheck(): void { @@ -263,41 +266,48 @@ export class NgxMatInputTelComponent } public onPhoneNumberChange(): void { - if (!this.phoneNumber) this.value = null - else - try { - this.numberInstance = parsePhoneNumberFromString( - this.phoneNumber.toString(), - this.selectedCountry.iso2.toUpperCase() as CC, - ) - - this.formatAsYouTypeIfEnabled() - this.value = this.numberInstance?.number - if (!this.value) throw new Error('Incorrect phone number') - - if (this.numberInstance && this.numberInstance.isValid()) { - if (this.phoneNumber !== this.formattedPhoneNumber()) { - this.phoneNumber = this.formattedPhoneNumber() - } - if ( - this.selectedCountry.iso2 !== this.numberInstance.country && - this.numberInstance.country - ) { - this.selectedCountry = this.getCountry(this.numberInstance.country) - this.countryChanged.emit(this.selectedCountry) - } - } - } catch (e) { - // if no possible numbers are there, - // then the full number is passed so that validator could be triggered and proper error could be shown - this.value = this.formattedPhoneNumber().toString() - } + try { + this._setCountry() + } catch (e) { + // Pass a value to trigger the validator error + this.value = this.formattedPhoneNumber().toString() + } this.propagateChange(this.value) this._changeDetectorRef.markForCheck() } - public onCountrySelect(country: Country, el: any): void { + private _setCountry() { + if (!this.phoneNumber) { + this.value = null + return + } + + this.numberInstance = parsePhoneNumberFromString( + this.phoneNumber.toString(), + this.selectedCountry.iso2.toUpperCase() as CC, + ) + + this.formatAsYouTypeIfEnabled() + this.value = this.numberInstance?.number + + if (!this.value) throw new Error('Incorrect phone number') + + if (this.numberInstance && this.numberInstance.isValid()) { + if (this.phoneNumber !== this.formattedPhoneNumber()) { + this.phoneNumber = this.formattedPhoneNumber() + } + if ( + this.selectedCountry.iso2 !== this.numberInstance.country && + this.numberInstance.country + ) { + this.selectedCountry = this.getCountry(this.numberInstance.country) + this.countryChanged.emit(this.selectedCountry) + } + } + } + + public onCountrySelect(country: Country, el: HTMLInputElement): void { if (this.phoneNumber) { this.phoneNumber = this.numberInstance?.nationalNumber }