ngx-intl-tel-input-v15
v0.1.1
Published
An Angular library for entering international phone numbers and validating the input based on the country code.
Downloads
12
Readme
NgxIntlTelInputV15
An Angular library for entering international phone numbers and validating the input based on the country code.
Installation
Install the necessary dependencies:
npm install intl-tel-input --save
npm install --save-dev @types/intl-tel-input
npm install ngx-intl-tel-input-v15 --save
Add dependencies to your angular.json
or project.json
:
"styles": [
"node_modules/intl-tel-input/build/css/intlTelInput.css"
],
"scripts": [
"node_modules/intl-tel-input/build/js/intlTelInput.min.js",
"node_modules/intl-tel-input/build/js/utils.js"
]
Usage
- Import
NgxIntlTelInputModule
into your module file.
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input-v15';
@NgModule({
imports: [NgxIntlTelInputModule],
// other module configuration...
})
export class YourModule { }
- Use
ngxIntlTelInput
directive in your template.
<input
type="text"
ngxIntlTelInput
[ngxTelInputOptions]="ngxTelInputOptions"
[phonenumber]="phonenumber"
(hasError)="invalidForm($event)"
(countryChange)="getCountryData($event)"
/>
Options
The [ngxTelInputOptions]
input accepts an object providing configuration for the input. Example:
const options = {
allowDropdown: true,
autoInsertDialCode: false,
nationalMode: true,
separateDialCode: false,
preferredCountries: ['us', 'gb'],
formatOnDisplay: true,
initialCountry: "auto",
autoPlaceholder: "polite",
};
[ngxTelInputOptions]="options"
Inputs
- [ngxTelInputOptions]: Object - Configuration options for the input.
- [phonenumber]: String - Mobile number without the country code.
Outputs
- (hasError): EventEmitter - Emits an error message when validation fails.
- (countryChange): EventEmitter - Emits country metadata on country change.
Example
ngxTelInputOptions = {
allowDropdown: true,
autoInsertDialCode: false,
// other options...
};
phonenumber = "";
invalidForm(error: string) {
console.log("Validation Error: ", error);
}
getCountryData(data: any) {
console.log("Country Data: ", data);
}