|
|
|
@ -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 { phoneNumberPattern } from '@shared/models/settings.models'; |
|
|
|
import { Subscription } from 'rxjs'; |
|
|
|
import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field/form-field'; |
|
|
|
|
|
|
|
@ -82,7 +81,6 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
phonePlaceholder = '+12015550123'; |
|
|
|
flagIcon: string; |
|
|
|
phoneFormGroup: FormGroup; |
|
|
|
phoneNumberPattern = phoneNumberPattern; |
|
|
|
|
|
|
|
private isLoading = true; |
|
|
|
get isLoad(): boolean { |
|
|
|
@ -103,7 +101,8 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
private baseCode = 127397; |
|
|
|
private countryCallingCode = '+'; |
|
|
|
private modelValue: string; |
|
|
|
private valueChange$: Subscription = null; |
|
|
|
private changeSubscriptions: Subscription[] = []; |
|
|
|
|
|
|
|
private propagateChange = (v: any) => { }; |
|
|
|
|
|
|
|
constructor(private translate: TranslateService, |
|
|
|
@ -116,7 +115,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
} |
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
const validators: ValidatorFn[] = [Validators.pattern(phoneNumberPattern), this.validatePhoneNumber()]; |
|
|
|
const validators: ValidatorFn[] = [(c: FormControl) => Validators.pattern(this.getPhoneNumberPattern())(c), this.validatePhoneNumber()]; |
|
|
|
if (this.required) { |
|
|
|
validators.push(Validators.required); |
|
|
|
} |
|
|
|
@ -125,12 +124,12 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
phoneNumber: [null, validators] |
|
|
|
}); |
|
|
|
|
|
|
|
this.valueChange$ = this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { |
|
|
|
this.changeSubscriptions.push(this.phoneFormGroup.get('phoneNumber').valueChanges.subscribe(value => { |
|
|
|
this.updateModel(); |
|
|
|
this.defineCountryFromNumber(value); |
|
|
|
}); |
|
|
|
})); |
|
|
|
|
|
|
|
this.phoneFormGroup.get('country').valueChanges.subscribe(value => { |
|
|
|
this.changeSubscriptions.push(this.phoneFormGroup.get('country').valueChanges.subscribe(value => { |
|
|
|
if (value) { |
|
|
|
const code = this.countryCallingCode; |
|
|
|
this.getFlagAndPhoneNumberData(value); |
|
|
|
@ -142,21 +141,23 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
})); |
|
|
|
} |
|
|
|
|
|
|
|
ngOnDestroy() { |
|
|
|
if (this.valueChange$) { |
|
|
|
this.valueChange$.unsubscribe(); |
|
|
|
for (const subscription of this.changeSubscriptions) { |
|
|
|
subscription.unsubscribe(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
focus() { |
|
|
|
const phoneNumber = this.phoneFormGroup.get('phoneNumber'); |
|
|
|
this.phoneFormGroup.markAsPristine(); |
|
|
|
this.phoneFormGroup.markAsUntouched(); |
|
|
|
if (!phoneNumber.value) { |
|
|
|
phoneNumber.patchValue(this.countryCallingCode); |
|
|
|
phoneNumber.patchValue(this.countryCallingCode, {emitEvent: false}); |
|
|
|
} |
|
|
|
if (phoneNumber.untouched && this.countryCallingCode !== phoneNumber.value) { |
|
|
|
phoneNumber.markAsTouched(); |
|
|
|
phoneNumber.updateValueAndValidity(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -182,7 +183,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
validatePhoneNumber(): ValidatorFn { |
|
|
|
return (c: FormControl) => { |
|
|
|
const phoneNumber = c.value; |
|
|
|
if (phoneNumber && this.parsePhoneNumberFromString) { |
|
|
|
if (phoneNumber && this.countryCallingCode !== phoneNumber && this.parsePhoneNumberFromString) { |
|
|
|
const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber); |
|
|
|
if (!parsedPhoneNumber?.isValid() || !parsedPhoneNumber?.isPossible()) { |
|
|
|
return { |
|
|
|
@ -206,8 +207,13 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
private getPhoneNumberPattern(): RegExp { |
|
|
|
return new RegExp(`^${this.countryCallingCode.replace('+', '\\+')}$|^\\+[1-9]\\d{1,14}$`); |
|
|
|
} |
|
|
|
|
|
|
|
validate(): ValidationErrors | null { |
|
|
|
return this.phoneFormGroup.get('phoneNumber').valid ? null : { |
|
|
|
const phoneNumber = this.phoneFormGroup.get('phoneNumber'); |
|
|
|
return phoneNumber.valid || phoneNumber.untouched || this.countryCallingCode === phoneNumber.value ? null : { |
|
|
|
phoneFormGroup: false |
|
|
|
}; |
|
|
|
} |
|
|
|
@ -232,18 +238,18 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida |
|
|
|
this.modelValue = phoneNumber; |
|
|
|
let country = this.defaultCountry; |
|
|
|
if (this.parsePhoneNumberFromString) { |
|
|
|
country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country : this.defaultCountry; |
|
|
|
country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry; |
|
|
|
this.getFlagAndPhoneNumberData(country); |
|
|
|
} |
|
|
|
this.phoneFormGroup.patchValue({phoneNumber, country}, {emitEvent: !phoneNumber}); |
|
|
|
this.phoneFormGroup.reset({phoneNumber, country}, {emitEvent: false}); |
|
|
|
} |
|
|
|
|
|
|
|
private updateModel() { |
|
|
|
const phoneNumber = this.phoneFormGroup.get('phoneNumber'); |
|
|
|
if (phoneNumber.valid && phoneNumber.value) { |
|
|
|
if (phoneNumber.valid) { |
|
|
|
this.modelValue = phoneNumber.value; |
|
|
|
this.propagateChange(this.modelValue); |
|
|
|
} else if (phoneNumber.invalid && phoneNumber.value) { |
|
|
|
} else { |
|
|
|
this.propagateChange(null); |
|
|
|
} |
|
|
|
} |
|
|
|
|