Install ngx-intl-tel-input
Install the library via npm:
npm i ngx-intl-tel-input
Import NgxIntlTelInputModule
Add the NgxIntlTelInputModule to your application. Open app.module.ts
and update it as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NgxIntlTelInputModule } from 'ngx-intl-tel-input'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, NgxIntlTelInputModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
4. Add a Basic OTP Input Example
Now let’s add a simple example of creating simple otp form input field in app.component.ts
and app.component.html
.
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { SearchCountryField, CountryISO, PhoneNumberFormat } from 'ngx-intl-tel-input'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { separateDialCode = false; SearchCountryField = SearchCountryField; CountryISO = CountryISO; PhoneNumberFormat = PhoneNumberFormat; preferredCountries: CountryISO[] = [CountryISO.UnitedStates, CountryISO.UnitedKingdom]; phoneForm = new FormGroup({ phone: new FormControl(undefined, [Validators.required]) }); changePreferredCountries() { this.preferredCountries = [CountryISO.India, CountryISO.Canada]; } } |
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!--The content below is only a placeholder and can be replaced.--> <div style="margin: 50px"> <h1>Test International Telephone Input Form</h1> <h2>Angular 12</h2> <br /> <div class="wrapper"> <i ><b style="color: orange" >And yes, flags are not visible here. It's a Stackblitz only issue.</b ></i > </div> <div class="wrapper"> <button (click)="changePreferredCountries()"> Change Preferred Countries </button> </div> <div class="wrapper"> <input type="checkbox" [(ngModel)]="separateDialCode" /> <label> Separate Dial Code?</label> </div> <form #f="ngForm" [formGroup]="phoneForm"> <div class="wrapper"> <ngx-intl-tel-input [cssClass]="'custom'" [preferredCountries]="preferredCountries" [enableAutoCountrySelect]="true" [enablePlaceholder]="true" [searchCountryFlag]="true" [searchCountryField]="[ SearchCountryField.Iso2, SearchCountryField.Name ]" [selectFirstCountry]="false" [selectedCountryISO]="CountryISO.India" [maxLength]="15" [phoneValidation]="true" [separateDialCode]="separateDialCode" [numberFormat]="PhoneNumberFormat.National" name="phone" formControlName="phone" > </ngx-intl-tel-input> </div> <div class="wrapper"> <button (click)="f.reset()">Reset</button> </div> </form> <br /> <div> <strong>Is input valid:</strong> <pre>{{ !f.form.controls['phone'].invalid }}</pre> </div> <div> <strong>Is input touched:</strong> <pre>{{ f.form.controls['phone'].touched }}</pre> </div> <div> <strong>Is form valid:</strong> <pre>{{ f.form.valid }}</pre> </div> <div> <strong>Form value:</strong> <pre>{{ f.form.value | json }}</pre> </div> <div> <strong>Form validation errors:</strong> <pre>{{ f.form.controls['phone'].errors | json }}</pre> </div> </div> |
FULL SOURCE CODE