A Angular(6+) Intl Phone Input having country dropdown with phone validation supports
npm install angular-intl-phoneangular-intl-phone Phone library supported intl-tel-input & google-libphonenumber to validate phone.
* Angular 9 and 9+ Supported
* If your TypeScript is lower than 3.7 and angular version is lower than 9 version. Update TypeScript else go to tsconfig.json file and add "skipLibCheck": true in "compailerOptions"
```
npm install --save angular-intl-phone
Include it to your module for example your app.module.ts
`ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularIntlPhoneModule } from 'angular-intl-phone';
@NgModule({
declarations: [
AppComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
AngularIntlPhoneModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
`ts
import { ChangeDetectorRef, Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { InputSearchSelectConfig } from 'input-search-select-option';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
phoneData: any = '';
reactiveForm: FormGroup;
config: AngularIntlPhoneConfig = {
id: 'telphone',
name: 'telphone',
placeholder: 'Enter phone number',
options: {
onlyCountries: ["in", "us", "uk"],
initialCountry: 'in',
separateDialCode: true,
hiddenInput: "full_phone",
}
}
constructor(fb: FormBuilder, private cdr: ChangeDetectorRef) {
this.reactiveForm = fb.group({
phone: ['', Validators.compose([Validators.required])],
});
}
}
`
`html
* Angular 9+