Skip to content

Commit 2c4390c

Browse files
partners-wlipartners-wli
committed
:initial commit
1 parent e0369e9 commit 2c4390c

39 files changed

+2863
-1
lines changed

‎.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# OS Files
2+
.DS_Store
3+
Thumbs.db
4+
5+
# Dependencies
6+
node_modules/
7+
8+
# Dev/Build Artifacts
9+
/dist/
10+
/tests/e2e/videos/
11+
/tests/e2e/screenshots/
12+
/tests/unit/coverage/
13+
jsconfig.json
14+
15+
# Local Env Files
16+
.env.local
17+
.env.*.local
18+
19+
# Log Files
20+
*.log
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
# Unconfigured Editors
26+
.idea
27+
*.suo
28+
*.ntvs*
29+
*.njsproj
30+
*.sln
31+
*.sw*
32+
#Yarn
33+
yarn.lock

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
1.0.0 (JULY 17, 2020)
2+
Initial release

‎README.md

+205-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,205 @@
1-
# AngularJS-Phone-Number-Input
1+
# AngularJS - Phone Number Input
2+
3+
An AngularJS package for entering and validating international telephone numbers. It also adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting / validation methods.
4+
5+
## Table of contents
6+
7+
- [Supports](#supports)
8+
- [Demo](#demo)
9+
- [Install Dependencies](#install-dependencies)
10+
- [Add Dependency Style](#add-dependency-style)
11+
- [Usage](#usage)
12+
- [Example](#example)
13+
- [Options](#options)
14+
- [Methods](#methods)
15+
- [Supported Formats](#supported-formats)
16+
- [Want to Contribute?](#want-to-contribute)
17+
- [Collection of Components](#collection-of-components)
18+
- [Changelog](#changelog)
19+
- [Credits](#credits)
20+
- [License](#license)
21+
- [Keywords](#Keywords)
22+
23+
## Supports:
24+
25+
- Angular 8
26+
- Angular 9
27+
- ReactiveFormsModule
28+
- FormsModule
29+
- Validation with [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)
30+
31+
32+
## Demo
33+
34+
[![](phoneNg.gif)](https://github.com/weblineindia/AngularJS-Phone-Number-Input/phone.gif)
35+
36+
37+
### Install Dependencies
38+
39+
`$ npm install angular-weblineindia-phone-number --save`
40+
41+
`$ npm install google-libphonenumber --save`
42+
43+
`$ ng add ngx-bootstrap`
44+
45+
### Add Dependency Style
46+
47+
Add _'angular-weblineindia-phone-number'_ style file:
48+
49+
`./node_modules/angular-weblineindia-phone-number/build/css/intlTelInput.css`
50+
51+
to **angular.json** styles array:
52+
53+
```json
54+
55+
"styles": [
56+
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
57+
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
58+
"./node_modules/angular-weblineindia-phone-number/build/css/intlTelInput.css",
59+
"src/styles.css"
60+
],
61+
62+
```
63+
64+
### Install This Library
65+
66+
`$ npm install angular-weblineindia-phone-number --save`
67+
68+
## Usage
69+
70+
Add `BsDropDownModule` and `PhoneModule` to your module file:
71+
72+
```javascript
73+
import { PhoneModule } from "angular-weblineindia-phone-number";
74+
75+
imports: [BsDropdownModule.forRoot(), PhoneModule];
76+
```
77+
78+
## Example
79+
80+
81+
```html
82+
<div *ngFor="let value of phoneNumberValue;let indexOfelement=index;">
83+
<lib-phone
84+
[value]="value.phone"
85+
[index]="indexOfelement"
86+
(onMultiple)="onMultiplePhone()"
87+
(change)="onChangeInput($event)"
88+
[phoneArray]="phoneNumberValue"
89+
[isShowPlus]="phoneNumberValue.length-1 === indexOfelement"
90+
[phoneValidationErrorMsg]="phoneValue.phoneValidationErrorMsg"
91+
[phoneUniqueErrorMsg]="phoneValue.phoneUniqueErrorMsg"
92+
[maxLength]="phoneValue.maxLength"
93+
[isMultiple]="phoneValue.isMultiple"
94+
></lib-phone>
95+
</div>
96+
```
97+
98+
```typescript
99+
import { Component } from "@angular/core";
100+
101+
@Component({
102+
selector: "app-root",
103+
templateUrl: "./app.component.html",
104+
styleUrls: ["./app.component.css"]
105+
})
106+
export class AppComponent {
107+
phoneNumberValue: any = [
108+
{
109+
phone: "",
110+
code: ""
111+
}
112+
];
113+
phoneValue: any = {
114+
phoneValidationErrorMsg: "Phone number is invalid",
115+
phoneUniqueErrorMsg: "Do not enter same phone number",
116+
maxLength: 15,
117+
isMultiple: true
118+
};
119+
120+
onMultiplePhone() {
121+
this.phoneNumberValue.push({ phone: "" });
122+
}
123+
onChangeInput(data) {
124+
this.phoneNumberValue[data.index].phone = data.event.target.value;
125+
this.phoneNumberValue[data.index].code = data.code;
126+
}
127+
}
128+
```
129+
130+
## Options
131+
132+
| Options | Type | Default | Description |
133+
| ------------------------ | ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------- |
134+
| cssClass | `string` | `control-form` | Bootstrap input css class or your own custom one. |
135+
| preferredCountries | `<CountryISO>[]` | `[]` | List of countries, which will appear at the top. |
136+
| onlyCountries | `<CountryISO>[]` | `[]` | List of manually selected countries, which will appear in the dropdown. |
137+
| enableAutoCountrySelect | `boolean` | `false` | Toggle automatic country (flag) selection based on user input. |
138+
| enablePlaceholder | `boolean` | `true` | Input placeholder text, which addapts to the country selected. |
139+
| searchCountryFlag | `boolean` | `false` | Enables input search box for countries in the flag dropdown. |
140+
| searchCountryField | `<SearchCountryField>[]` | `[SearchCountryField.All]` | Customize which fields to search in, if `searchCountryFlag` is enabled. Use `SearchCountryField` helper enum. |
141+
| searchCountryPlaceholder | `string` | `'Search Country'` | Placeholder value for `searchCountryField` |
142+
| maxLength | `number` | `None` | Add character limit. |
143+
| tooltipField | `<TooltipLabel>` | `None` | Set tooltip on flag hover. Use `TooltipLabel` helper enum for label type options. |
144+
| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
145+
| phoneValidation | `boolean` | `true` | Disable phone validation. |
146+
| inputId | `string` | `phone` | Unique ID for `<input>` element. |
147+
| selectedCountryISO | `<CountryISO>` | `None` | Set specific country on load. |
148+
| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
149+
| countryChange | `<Country>` | `None` | Emits country value when the user selects a country from the dropdown. |
150+
| phoneValidationErrorMsg | `string` | | default phone validation error message |
151+
| phoneUniqueErrorMsg | `string` | | default phone unique error message |
152+
| maxLength | `number` | 15 | default phone maxlength |
153+
| isMultiple | `boolean` | true | for add multiple phone number |
154+
155+
156+
157+
158+
## Methods
159+
160+
| Name | Description |
161+
| ---------- | -------------------------------------------- |
162+
| onMultiple | Gets triggered when click on plus icon. |
163+
| change | Gets triggered every time input got changed. |
164+
165+
## Supported Formats
166+
167+
Following formats are supported
168+
169+
- NATIONAL // Produces "044 668 18 00"
170+
- INTERNATIONAL // Produces "+41 44 668 18 00"
171+
- E164 // Produces "+41446681800"
172+
173+
## Want to Contribute?
174+
175+
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
176+
- [Fork it](http://help.github.com/forking/).
177+
- Create new branch to contribute your changes.
178+
- Commit all your changes to your branch.
179+
- Submit a [pull request](http://help.github.com/pull-requests/).
180+
181+
---
182+
183+
## Collection of Components
184+
185+
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html)
186+
187+
---
188+
189+
## Changelog
190+
191+
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
192+
193+
## Credits
194+
195+
angular-weblineindia-phone-number is inspired by the [ngx-intl-tel-input](https://www.npmjs.com/package/ngx-intl-tel-input).
196+
197+
## License
198+
199+
[MIT](LICENSE)
200+
201+
[mit]: https://github.com/weblineindia/AngularJS-Phone-Number-Input/blob/master/LICENSE
202+
203+
## Keywords
204+
205+
angularjs, angular-weblineindia-phone-number, phone-number-validation, angular-phonenumber-input, phone-number-input, phone-input-class, international-telephone-input, telephone-input

‎angular-weblineindia-phone-number.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* Generated bundle index. Do not edit.
3+
*/
4+
export * from './public-api';

‎angular-weblineindia-phone-number.metadata.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"__symbolic":"module","version":4,"metadata":{"PhoneService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"PhoneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"lib-phone","template":"<!--The content below is only a placeholder and can be replaced.-->\n<form #f=\"ngForm\" [formGroup]=\"phoneForm\">\n <div>\n <ngx-intl-tel-input\n [value]=\"value\"\n [cssClass]=\"'custom'\"\n [preferredCountries]=\"preferredCountries\"\n [enableAutoCountrySelect]=\"false\"\n [enablePlaceholder]=\"false\"\n [searchCountryFlag]=\"true\"\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\n [selectFirstCountry]=\"false\"\n [selectedCountryISO]=\"CountryISO.India\"\n [maxLength]=\"maxLength\"\n [tooltipField]=\"TooltipLabel.Name\"\n [phoneValidation]=\"true\"\n [separateDialCode]=\"separateDialCode\"\n name=\"phone\"\n formControlName=\"phone\"\n (input)=\"onChangeinput($event, index, phoneArray)\"\n >\n </ngx-intl-tel-input>\n <span *ngIf=\"f.form.value.phone !== null && isMultiple\" class=\"add-remove\">\n <span>\n <fa-icon [icon]=\"faMinus\"></fa-icon>\n </span>\n <span *ngIf=\"isShowPlus\" class=\"plus\">\n <fa-icon [icon]=\"faPlus\" (click)=\"onClickMultiplePhone()\"></fa-icon>\n </span>\n </span>\n <p\n [ngClass]=\"{\n control: true,\n 'error-msg':\n f.form.controls['phone'].invalid && f.form.value.phone !== null\n }\"\n *ngIf=\"f.form.controls['phone'].invalid && f.form.value.phone !== null\"\n >\n <span>{{ phoneValidationErrorMsg }}</span>\n </p>\n <p\n [ngClass]=\"{\n control: true,\n 'error-msg': isUniquePhone\n }\"\n *ngIf=\"isUniquePhone\"\n >\n <span>{{ phoneUniqueErrorMsg }}</span>\n </p>\n </div>\n </form>\n ","styles":["p.control.error-msg{color:red}span.plus{margin-left:2px}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":2}}]}],"phoneArray":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":2}}]}],"isShowPlus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":2}}]}],"phoneValidationErrorMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":2}}]}],"phoneUniqueErrorMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":2}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":2}}]}],"isMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":2}}]}],"onMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":2}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":2}}]}],"changePreferredCountries":[{"__symbolic":"method"}],"onChangeinput":[{"__symbolic":"method"}],"onClickMultiplePhone":[{"__symbolic":"method"}]}},"PhoneModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PhoneComponent"}],"imports":[],"exports":[{"__symbolic":"reference","name":"PhoneComponent"}]}]}],"members":{}}},"origins":{"PhoneService":"./lib/phone.service","PhoneComponent":"./lib/phone.component","PhoneModule":"./lib/phone.module"},"importAs":"angular-weblineindia-phone-number"}

0 commit comments

Comments
 (0)