Skip to content

Commit

Permalink
refactor(component): detailed method
Browse files Browse the repository at this point in the history
  • Loading branch information
rbalet committed Oct 14, 2024
2 parents e671170 + 4db4336 commit ec492bb
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 42 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-mat-input-tel",
"version": "18.5.2",
"version": "18.5.3",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-mat-input-tel/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-mat-input-tel",
"version": "18.5.2",
"version": "18.5.3",
"author": {
"name": "Raphaël Balet",
"email": "[email protected]"
Expand Down
86 changes: 48 additions & 38 deletions projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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

Expand Down

0 comments on commit ec492bb

Please sign in to comment.