https://ng4-intl-phone.netlify.app/
This is a simple library with international phone prefix with flags images.
You can also help me and the project out by contributing through a donation on PayPal.
To install this component to an external project, follow the procedure:
-
npm install ng4-intl-phone --save
-
Add InternationalPhoneModule import to your @NgModule like example below
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { MyTestApp } from './my-test-app'; import { InternationalPhoneModule } from 'ng4-intl-phone'; @NgModule({ imports: [ BrowserModule, InternationalPhoneModule ], declarations: [ MyTestApp ], bootstrap: [ MyTestApp ] }) export class MyTestAppModule {}
##Testing in localhost
npm install ./relative/path/to/libafternpm run buildto test locally in another app
Use one of the following two options.
In this option the ngModel binding is used.
```html
<h1>
{{title}}
</h1>
<div class="row">
<div class="col-md-2">
<int-phone-prefix [(ngModel)]="phoneNumber"></int-phone-prefix>
</div>
</div>
```
In this option the value accessor of reactive forms is used.
To use reactive forms define the application class as follows:
```ts
export class MyTestApp implements OnInit {
private myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myPhone: ['', Validators.required]
// other controls are here...
});
}
}
```
Add the following snippet inside your template:
```html
<form [formGroup]="myForm" novalidate>
<int-phone-prefix [locale]="'es'"
formControlName="myPhone"></int-phone-prefix>
<!-- other controls are here... -->
</form>
```
An ISO 639-1 language code can be provided to set available language: es: Spanish, en: English
An ISO 639-1 country code can be provided to set default country selected.
maxLength (default: 15)
Allows only numeric values (default: true)
- License: MIT
- Author: kondi0
- Mail: [email protected]
- Phone
- Prefix
- International
- Angular2
- Angular4
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
