如何为电子邮件制作输入掩码？

Question

要创建蒙版，我使用angular2 text mask。我不知道如何为电子邮件制作输入掩码。

试过了：

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

但是没有任何效果。只添加两个字符，一个在一个前面，另一个在后面。如何为电子邮件制作输入掩码（欢迎使用其他用于在 Angular 2+ 上进行掩码的工具）。

Answer 1

您需要安装以下软件包：

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

在您需要将TextMaskModule 添加到您的{name}.module.ts 之后：

例如（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 { }

然后添加输入textMask到{name}.component.html：

例如（app.component.html）：

<input [textMask]="{mask: emailMask}" placeholder="example@domain.com">

然后将emailMask 添加到{name}.component.ts：

例如（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;
}