Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 Ngx-Mask Example to Mask HTML Input Fields for Custom Validation Patterns in Browser Using Typescript

Posted on January 25, 2023

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

 

 

TypeScript
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

 

 

TypeScript
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

 

 

 

 

Recent Posts

  • Node.js Tutorial to Export All Pages of PDF Document to Images and Save it in Javascript
  • Node.js OfficeGen Example to Add Text & Images in Powerpoint Presentation in Javascript
  • Node.js OfficeGen Example to Generate Excel Files By Adding Data inside Cells & Sheets in Javascript
  • Node.js OfficeGen Example to Create Word Docx Files & Add Text Images inside it Using Javascript
  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme