Angular 12 ngx-input-mask Directive Example to Take Form Fields Mask Input For Validating Phone Numbers and Credit Cards & Dates in Browser

What we are going to look at today is Angular 12 ngx-input-mask Directive Example to Take Form Fields Mask Input For Validating Phone Numbers and Credit Cards & Dates in Browser We are going to be very clear about this topic. We hope that all the skepticism on this topic will be resolved through this article.

Angular 12 ngx-input-mask Directive Example to Take Form Fields Mask Input For Validating Phone Numbers and Credit Cards & Dates in Browser

Angular 12 ngx-input-mask Directive Example to Take Form Fields Mask Input For Validating Phone Numbers and Credit Cards & Dates in Browser

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { InputMaskModule } from "ngx-input-mask";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, InputMaskModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
<input
  type="text"
  inputMask="+7 (000) 000-00-00"
  [(ngModel)]="phone"
  name="phone"
/>
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import {
  InputMaskModule,
  MaskTemplates,
  MASK_TEMPLATES,
  DEFAULT_MASK_TEMPLATES,
} from "ngx-input-mask";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, InputMaskModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: MASK_TEMPLATES,
      useValue: {
        ...DEFAULT_MASK_TEMPLATES,
        H: /[ABCEHKMOPTXY]/, // Russian car license plate
        // Put your templates here (NOTICE: There allows keys 1 letter only!)
      } as MaskTemplates,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
Then you can use it:

<input
  type="text"
  inputMask="H 000 HH 000"
  [(ngModel)]="licensePlate"
  name="licensePlate"
/>

Read Also: Angular 12 jsPDF GST Billing Invoice Generator to Build PDF Documents Using jspdf-Autotable Library Deployed to Heroku in Browser

Final Words

We hope you find the Angular 12 ngx-input-mask Directive Example to Take Form Fields Mask Input For Validating Phone Numbers and Credit Cards & Dates in Browser useful. And please let us know if you have any doubts about this article.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment