CODEWITHSUNDEEP
angularmask
user306007
user306007

Reputation: 21

How to make an input mask for email?

To create a mask, I use angular2 text mask. I can't figure out how to make an input mask for email.

Tried so: 

public emailMask = [/[a-z]/, '@',  /[a-z]/, '.', /[a-z]/ ]

But nothing works. Adds only two characters one in front of the other behind. How can I make an input mask for e-mail (Other tools for masking on the angular 2+ are welcome).

Upvotes: 0

Views: 13156

Answers (1)

progm
progm

Reputation: 2858

You need to install the following packages:

npm install --save angular2-text-mask
npm install --save text-mask-addons

After you need to add TextMaskModule to your {name}.module.ts:

For example (app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { TextMaskModule } from 'angular2-text-mask';


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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TextMaskModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then add to input textMask to {name}.component.html:

For example (app.component.html):

<input [textMask]="{mask: emailMask}" placeholder="[email protected]">

After that add emailMask to {name}.component.ts:

For example (app.component.ts):

import { Component } from '@angular/core';
import emailMask from 'text-mask-addons/dist/emailMask';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  emailMask = emailMask;
}

Upvotes: 0

Related Questions