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/lib
after npm run build
to test locally in another app
Usage
Use one of the following two options.
1. ngModel binding
In this option the ngModel binding is used.
<h1>
{{title}}
</h1>
<div class="row">
<div class="col-md-2">
<int-phone-prefix [(ngModel)]="phoneNumber"></int-phone-prefix>
</div>
</div>
2. Reactive forms
In this option the value accessor of reactive forms is used.
To use reactive forms define the application class as follows:
export class MyTestApp implements OnInit {
private myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myPhone: ['', Validators.required]
});
}
}
Add the following snippet inside your template:
<form [formGroup]="myForm" novalidate>
<int-phone-prefix [locale]="'es'"
formControlName="myPhone"></int-phone-prefix>
</form>
@Input() locale
An ISO 639-1 language code can be provided to set available language:
es: Spanish,
en: English
@Input() defaultCountry
An ISO 639-1 country code can be provided to set default country selected.
@Input() maxLength
maxLength (default: 15)
@Input() onlyNumbers
Allows only numeric values (default: true)
License
Author
Mail
Keywords
- Phone
- Prefix
- International
- Angular2
- Angular4