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