ngx-mask

<a href="http://jsdaddy.io/img/logo.png"> <h1 align="center">NGX MASK</h1> </a> <p align="center"> NGX MASK 是解决使用所需模式进行输入掩码的最佳指令 </p>

您还可以尝试我们的 NGX LOADER INDICATOR 查看。您还可以尝试我们的 NGX COPYPASTE 查看。

您可以尝试带有示例的实时文档

安装

Angular 版本 17.x.x

$ npm install --save ngx-mask

Angular 版本 16.x.x

$ npm install --save ngx-mask@16.4.2

Angular 版本 15.x.x

$ npm install --save ngx-mask@15.2.3

Angular 版本 14.x.x

$ npm install --save ngx-mask@14.3.3

Angular 版本 13.x.x 或 12.x.x

$ npm install --save ngx-mask@13.2.2

如果 ngx-mask 版本 >= 15.0.0 的快速入门

导入 ngx-mask 指令、管道，并使用 provideNgxMask 函数提供 NgxMask 提供者。

使用默认配置选项（应用程序级别）

bootstrapApplication(AppComponent, {
    providers: [
        (...)
        provideEnvironmentNgxMask(),
        (...)
    ],
}).catch((err) => console.error(err));

传入自定义掩码配置选项

import { IConfig } from 'ngx-mask'

const maskConfig: Partial<IConfig> = {
  validation: false,
};

bootstrapApplication(AppComponent, {
    providers: [
        (...)
        provideEnvironmentNgxMask(maskConfig),
        (...)
    ],
}).catch((err) => console.error(err));

使用函数进行配置：

const maskConfigFunction: () => Partial<IConfig> = () => {
  return {
    validation: false,
  };
};

bootstrapApplication(AppComponent, {
    providers: [
         (...)
         provideEnvironmentNgxMask(maskConfigFunction),
         (...)
],
}).catch((err) => console.error(err));

使用功能级别的配置选项

@Component({
    selector: 'my-feature',
    templateUrl: './my-feature.component.html',
    styleUrls: ['./my-feature.component.css'],
    standalone: true,
    imports: [NgxMaskDirective, (...)],
    providers: [
          (...)
          provideNgxMask(),
          (...)
    ],
})
export class MyFeatureComponent {}

然后，将指令和管道导入所需的独立组件，并在输入中定义掩码。

使用 Angular 模块

@NgModule({
  imports: [
      NgxMaskDirective, NgxMaskPipe
  ],
  providers: [provideNgxMask()]
})

如果 ngx-mask 版本 < 15.0.0 的快速入门

对于 ngx-mask 版本 < 15.0.0 在 Angular 应用中导入 ngx-mask 模块。

使用默认掩码配置选项

import { NgxMaskModule, IConfig } from 'ngx-mask'

export const options: Partial<null|IConfig> | (() => Partial<IConfig>) = null;

@NgModule({
  imports: [
    NgxMaskModule.forRoot(),
  ],
})

传入自定义掩码配置选项

import { NgxMaskModule, IConfig } from 'ngx-mask'

const maskConfig: Partial<IConfig> = {
  validation: false,
};

@NgModule({
  imports: [
    NgxMaskModule.forRoot(maskConfig),
  ],
})

或使用函数获取配置：

const maskConfigFunction: () => Partial<IConfig> = () => {
  return {
    validation: false,
  };
};

@NgModule({
  imports: [
    NgxMaskModule.forRoot(maskConfigFunction),
  ],
})