Skip to content

Commit

Permalink
:initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@partners-wli
partners-wli committed Jul 17, 2020
1 parent e0369e9 commit 2c4390c
Show file tree
Hide file tree
Showing 39 changed files with 2,863 additions and 1 deletion.
33 changes: 33 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# OS Files
.DS_Store
Thumbs.db

# Dependencies
node_modules/

# Dev/Build Artifacts
/dist/
/tests/e2e/videos/
/tests/e2e/screenshots/
/tests/unit/coverage/
jsconfig.json

# Local Env Files
.env.local
.env.*.local

# Log Files
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Unconfigured Editors
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
#Yarn
yarn.lock
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
1.0.0 (JULY 17, 2020)
Initial release
206 changes: 205 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,205 @@
# AngularJS-Phone-Number-Input
# AngularJS - Phone Number Input

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.

## Table of contents

- [Supports](#supports)
- [Demo](#demo)
- [Install Dependencies](#install-dependencies)
- [Add Dependency Style](#add-dependency-style)
- [Usage](#usage)
- [Example](#example)
- [Options](#options)
- [Methods](#methods)
- [Supported Formats](#supported-formats)
- [Want to Contribute?](#want-to-contribute)
- [Collection of Components](#collection-of-components)
- [Changelog](#changelog)
- [Credits](#credits)
- [License](#license)
- [Keywords](#Keywords)

## Supports:

- Angular 8
- Angular 9
- ReactiveFormsModule
- FormsModule
- Validation with [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)


## Demo

[![](phoneNg.gif)](https://github.com/weblineindia/AngularJS-Phone-Number-Input/phone.gif)


### Install Dependencies

`$ npm install angular-weblineindia-phone-number --save`

`$ npm install google-libphonenumber --save`

`$ ng add ngx-bootstrap`

### Add Dependency Style

Add _'angular-weblineindia-phone-number'_ style file:

`./node_modules/angular-weblineindia-phone-number/build/css/intlTelInput.css`

to **angular.json** styles array:

```json

"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/angular-weblineindia-phone-number/build/css/intlTelInput.css",
"src/styles.css"
],

```

### Install This Library

`$ npm install angular-weblineindia-phone-number --save`

## Usage

Add `BsDropDownModule` and `PhoneModule` to your module file:

```javascript
import { PhoneModule } from "angular-weblineindia-phone-number";

imports: [BsDropdownModule.forRoot(), PhoneModule];
```

## Example


```html
<div *ngFor="let value of phoneNumberValue;let indexOfelement=index;">
<lib-phone
[value]="value.phone"
[index]="indexOfelement"
(onMultiple)="onMultiplePhone()"
(change)="onChangeInput($event)"
[phoneArray]="phoneNumberValue"
[isShowPlus]="phoneNumberValue.length-1 === indexOfelement"
[phoneValidationErrorMsg]="phoneValue.phoneValidationErrorMsg"
[phoneUniqueErrorMsg]="phoneValue.phoneUniqueErrorMsg"
[maxLength]="phoneValue.maxLength"
[isMultiple]="phoneValue.isMultiple"
></lib-phone>
</div>
```

```typescript
import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
phoneNumberValue: any = [
{
phone: "",
code: ""
}
];
phoneValue: any = {
phoneValidationErrorMsg: "Phone number is invalid",
phoneUniqueErrorMsg: "Do not enter same phone number",
maxLength: 15,
isMultiple: true
};

onMultiplePhone() {
this.phoneNumberValue.push({ phone: "" });
}
onChangeInput(data) {
this.phoneNumberValue[data.index].phone = data.event.target.value;
this.phoneNumberValue[data.index].code = data.code;
}
}
```

## Options

| Options | Type | Default | Description |
| ------------------------ | ------------------------ | -------------------------- | ------------------------------------------------------------------------------------------------------------- |
| cssClass | `string` | `control-form` | Bootstrap input css class or your own custom one. |
| preferredCountries | `<CountryISO>[]` | `[]` | List of countries, which will appear at the top. |
| onlyCountries | `<CountryISO>[]` | `[]` | List of manually selected countries, which will appear in the dropdown. |
| enableAutoCountrySelect | `boolean` | `false` | Toggle automatic country (flag) selection based on user input. |
| enablePlaceholder | `boolean` | `true` | Input placeholder text, which addapts to the country selected. |
| searchCountryFlag | `boolean` | `false` | Enables input search box for countries in the flag dropdown. |
| searchCountryField | `<SearchCountryField>[]` | `[SearchCountryField.All]` | Customize which fields to search in, if `searchCountryFlag` is enabled. Use `SearchCountryField` helper enum. |
| searchCountryPlaceholder | `string` | `'Search Country'` | Placeholder value for `searchCountryField` |
| maxLength | `number` | `None` | Add character limit. |
| tooltipField | `<TooltipLabel>` | `None` | Set tooltip on flag hover. Use `TooltipLabel` helper enum for label type options. |
| selectFirstCountry | `boolean` | `true` | Selects first country from `preferredCountries` if is set. If not then uses main list. |
| phoneValidation | `boolean` | `true` | Disable phone validation. |
| inputId | `string` | `phone` | Unique ID for `<input>` element. |
| selectedCountryISO | `<CountryISO>` | `None` | Set specific country on load. |
| separateDialCode | `boolean` | `false` | Visually separate dialcode into the drop down element. |
| countryChange | `<Country>` | `None` | Emits country value when the user selects a country from the dropdown. |
| phoneValidationErrorMsg | `string` | | default phone validation error message |
| phoneUniqueErrorMsg | `string` | | default phone unique error message |
| maxLength | `number` | 15 | default phone maxlength |
| isMultiple | `boolean` | true | for add multiple phone number |




## Methods

| Name | Description |
| ---------- | -------------------------------------------- |
| onMultiple | Gets triggered when click on plus icon. |
| change | Gets triggered every time input got changed. |

## Supported Formats

Following formats are supported

- NATIONAL // Produces "044 668 18 00"
- INTERNATIONAL // Produces "+41 44 668 18 00"
- E164 // Produces "+41446681800"

## Want to Contribute?

- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
- [Fork it](http://help.github.com/forking/).
- Create new branch to contribute your changes.
- Commit all your changes to your branch.
- Submit a [pull request](http://help.github.com/pull-requests/).

---

## Collection of Components

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)

---

## Changelog

Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).

## Credits

angular-weblineindia-phone-number is inspired by the [ngx-intl-tel-input](https://www.npmjs.com/package/ngx-intl-tel-input).

## License

[MIT](LICENSE)

[mit]: https://github.com/weblineindia/AngularJS-Phone-Number-Input/blob/master/LICENSE

## Keywords

angularjs, angular-weblineindia-phone-number, phone-number-validation, angular-phonenumber-input, phone-number-input, phone-input-class, international-telephone-input, telephone-input
4 changes: 4 additions & 0 deletions angular-weblineindia-phone-number.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/**
* Generated bundle index. Do not edit.
*/
export * from './public-api';
1 change: 1 addition & 0 deletions angular-weblineindia-phone-number.metadata.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +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"}
Loading

0 comments on commit 2c4390c

Please sign in to comment.