Welcome folks today in this blog post we will be using the ngx-mask library to mask html input fields for custom validation patterns in browser using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular project using the below command as shown below
ng new sampleapp
cd sampleapp
And after that you need to install the below library using the npm command as shown below
npm i ngx-mask
After that you will see the below directory structure of the angular app as shown below
Now first of all you need to go to app.module.ts file and copy paste the following code
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule , ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import {NgxMaskModule} from 'ngx-mask' @NgModule({ imports: [ BrowserModule, FormsModule , ReactiveFormsModule , NgxMaskModule.forRoot({ showMaskTyped : true, // clearIfNotMatch : true }) ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
As you can see we are importing the ngx-mask module and adding it inside the imports array and also for this we will need the formModule as well.
And now you need to go to app.component.html file and copy paste the following code
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<div> <label>Number</label> <input type="text" mask="0*" placeholder="123456789" > </div> <div> <label>Number</label> <input type="text" mask="0*" [(ngModel)]="number" > </div> <div> <label>Number 0000-000</label> <input type="text" mask="0000-0000" [(ngModel)]="number"> </div> <div> <label>Number (00) 0000 00</label> <input type="text" mask="(00) 0000 000" [(ngModel)]="number"> </div> <div> <label>Number (00) 0000 00</label> <input type="text" prefix="+963 " mask="00 0000 000" [showMaskTyped]= "true"> </div> <div> <label>IBAN</label> <input type="text" mask="SS 0000 0000 0000 0000" [(ngModel)]="iban"> </div> <div> <label>email</label> <input type="text" mask="A*@A*.S" [clearIfNotMatch]="true" placeholder="example@domine.com"> </div> <div> <label>text</label> <input type="text" mask="AA?A?A?A?A?A?A?A?" [clearIfNotMatch]="true" placeholder="something about something"> </div> <div> <label>Number Format 1000.000,5</label> <input type='text' mask="coma_separator.2" [(ngModel)]="s"> {{s}} </div> <div> <label>Number Format 1000,000.5</label> <input type='text' mask="coma_separator.10" > {{s}} </div> <div> <label>Number Format 1000,000.5</label> <input type='text' mask="coma_separator.10" [(ngModel)]="price01"> </div> <div> <label>Number Format 1000,000.5</label> <input type='text' mask="coma_separator.10" [(ngModel)]="price02"> </div> <div> <label>Number Format 1000,000.5</label> <input type='text' mask="coma_separator.10" [(ngModel)]="price03"> </div> <div> <label>Number Format zero</label> <input type='text' mask="coma_separator.10" [(ngModel)]="zero"> </div> <br> <div> <label>Tr</label> <input type='text' mask="coma_separator.2" [(ngModel)]="tr"> {{tr}} </div> <div> <label>Tr</label> <input type='text' mask="coma_separator.4" [(ngModel)]="tr2" > {{tr2}} </div> <div [formGroup]="form"> <div> <label>Tr s</label> <input type='text' mask="separator" formControlName="number" > </div> {{form.value | json}} </div> |
As you can see we have various input fields for entering numbers and passwords with custom patterns and mask. We are using the mask attribute to attach custom masks.
Now we need to go to app.component.ts file and copy paste the following code
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 24 25 26 27 28 |
import { Component } from '@angular/core'; import {FormGroup , FormBuilder} from "@angular/forms" @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { public number= 953656656532652626; public iban= "TR5454512622656695"; // regex email ^[a-zA-Z]+\w+@\w+(\.\w{1,10}){0,1}$ public price01 = 25971456111.5475757 public price02 = 25971456111.256000000 public price03 = 25971456111.66 public zero = 0.0; // 0 , 0.0 => 0 public tr =155151.9555 public tr2 =155151.9555 form constructor(fb:FormBuilder) { this.form = fb.group({ number:null }) } } |
As you can see we are attaching the custom values to the input field so that only certain values can be written inside the input fields
