|
|
|
@ -30,7 +30,6 @@ import { |
|
|
|
import { TranslateService } from '@ngx-translate/core'; |
|
|
|
import { Country, CountryData } from '@shared/models/country.models'; |
|
|
|
import examples from 'libphonenumber-js/examples.mobile.json'; |
|
|
|
import { CountryCode, getExampleNumber, parsePhoneNumberFromString } from 'libphonenumber-js'; |
|
|
|
import { phoneNumberPattern } from '@shared/models/settings.models'; |
|
|
|
import { Subscription } from 'rxjs'; |
|
|
|
import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field/form-field'; |
|
|
|
@ -59,7 +58,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
disabled: boolean; |
|
|
|
|
|
|
|
@Input() |
|
|
|
defaultCountry: CountryCode = 'US'; |
|
|
|
defaultCountry = 'US'; |
|
|
|
|
|
|
|
@Input() |
|
|
|
enableFlagsSelect = true; |
|
|
|
@ -80,13 +79,29 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
label = 'phone-input.phone-input-label'; |
|
|
|
|
|
|
|
allCountries: Array<Country> = this.countryCodeData.allCountries; |
|
|
|
phonePlaceholder: string; |
|
|
|
phonePlaceholder = '+12015550123'; |
|
|
|
flagIcon: string; |
|
|
|
phoneFormGroup: FormGroup; |
|
|
|
phoneNumberPattern = phoneNumberPattern; |
|
|
|
|
|
|
|
private isLoading = true; |
|
|
|
get isLoad(): boolean { |
|
|
|
return this.isLoading; |
|
|
|
} |
|
|
|
|
|
|
|
set isLoad(value) { |
|
|
|
if (this.isLoading) { |
|
|
|
this.isLoading = value; |
|
|
|
if (this.phoneFormGroup) { |
|
|
|
this.defineCountryFromNumber(this.phoneFormGroup.get('phoneNumber').value); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
private getExampleNumber; |
|
|
|
private parsePhoneNumberFromString; |
|
|
|
private baseCode = 127397; |
|
|
|
private countryCallingCode: string; |
|
|
|
private countryCallingCode = '+'; |
|
|
|
private modelValue: string; |
|
|
|
private valueChange$: Subscription = null; |
|
|
|
private propagateChange = (v: any) => { }; |
|
|
|
@ -94,6 +109,10 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
constructor(private translate: TranslateService, |
|
|
|
private fb: FormBuilder, |
|
|
|
private countryCodeData: CountryData) { |
|
|
|
import('libphonenumber-js/max').then((libphonenubmer) => { |
|
|
|
this.parsePhoneNumberFromString = libphonenubmer.parsePhoneNumberFromString; |
|
|
|
this.getExampleNumber = libphonenubmer.getExampleNumber; |
|
|
|
}).then(() => this.isLoad = false); |
|
|
|
} |
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
@ -108,13 +127,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
|
|
|
|
this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { |
|
|
|
this.updateModel(); |
|
|
|
if (value) { |
|
|
|
const parsedPhoneNumber = parsePhoneNumberFromString(value); |
|
|
|
const country = this.phoneFormGroup.get('country').value; |
|
|
|
if (parsedPhoneNumber?.country && parsedPhoneNumber?.country !== country) { |
|
|
|
this.phoneFormGroup.get('country').patchValue(parsedPhoneNumber.country, {emitEvent: true}); |
|
|
|
} |
|
|
|
} |
|
|
|
this.defineCountryFromNumber(value); |
|
|
|
}); |
|
|
|
|
|
|
|
this.phoneFormGroup.get('country').valueChanges.subscribe(value => { |
|
|
|
@ -155,9 +168,11 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
} |
|
|
|
|
|
|
|
private getPhoneNumberData(country): void { |
|
|
|
const phoneData = getExampleNumber(country, examples); |
|
|
|
this.phonePlaceholder = phoneData.number; |
|
|
|
this.countryCallingCode = '+' + phoneData.countryCallingCode; |
|
|
|
if (this.getExampleNumber) { |
|
|
|
const phoneData = this.getExampleNumber(country, examples); |
|
|
|
this.phonePlaceholder = phoneData.number; |
|
|
|
this.countryCallingCode = `+${this.enableFlagsSelect ? phoneData.countryCallingCode : ''}`; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
private getFlagIcon(countryCode) { |
|
|
|
@ -167,8 +182,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
validatePhoneNumber(): ValidatorFn { |
|
|
|
return (c: FormControl) => { |
|
|
|
const phoneNumber = c.value; |
|
|
|
if (phoneNumber) { |
|
|
|
const parsedPhoneNumber = parsePhoneNumberFromString(phoneNumber); |
|
|
|
if (phoneNumber && this.parsePhoneNumberFromString) { |
|
|
|
const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); |
|
|
|
if (!parsedPhoneNumber?.isValid() || !parsedPhoneNumber?.isPossible()) { |
|
|
|
return { |
|
|
|
invalidPhoneNumber: { |
|
|
|
@ -181,6 +196,16 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
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}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
validate(): ValidationErrors | null { |
|
|
|
return this.phoneFormGroup.get('phoneNumber').valid ? null : { |
|
|
|
phoneFormGroup: false |
|
|
|
@ -205,8 +230,11 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
|
|
|
|
writeValue(phoneNumber): void { |
|
|
|
this.modelValue = phoneNumber; |
|
|
|
const country = phoneNumber ? parsePhoneNumberFromString(phoneNumber)?.country : this.defaultCountry; |
|
|
|
this.getFlagAndPhoneNumberData(country); |
|
|
|
let country = this.defaultCountry; |
|
|
|
if (this.parsePhoneNumberFromString) { |
|
|
|
country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country : this.defaultCountry; |
|
|
|
this.getFlagAndPhoneNumberData(country); |
|
|
|
} |
|
|
|
this.phoneFormGroup.patchValue({phoneNumber, country}, {emitEvent: !phoneNumber}); |
|
|
|
} |
|
|
|
|
|
|
|
@ -215,7 +243,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
if (phoneNumber.valid && phoneNumber.value) { |
|
|
|
this.modelValue = phoneNumber.value; |
|
|
|
this.propagateChange(this.modelValue); |
|
|
|
} else { |
|
|
|
} else if (phoneNumber.invalid && phoneNumber.value) { |
|
|
|
this.propagateChange(null); |
|
|
|
} |
|
|
|
} |
|
|
|
|