ngx mask

NGXマスク

NGXマスクは、必要なパターンでマスキング入力を解決するための最良の指令です

NGXローダーインジケーターチェックを試すこともできます。 NGX CopyPaste Checkを試すこともできます。

例でライブドキュメントをお試しください

インストール

Angularバージョン17.xx

$ npm install --save ngx-mask

Angularバージョン16.xx

$ npm install --save [email protected]

Angularバージョン15.xx

$ npm install --save [email protected]

Angularバージョン14.xx

$ npm install --save [email protected]

Angularバージョン13.xxまたは12.xx

$ npm install --save [email protected]

NGX-Maskバージョンの場合はQuickStart> = 15.0.0

NGX-Maskディレクティブ、パイプ、およびNGXMASKプロバイダーにprovideNgxMask機能を提供します。

デフォルトの構成オプションアプリケーションレベル

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

独自のマスク設定オプションを渡します

 import { NgxMaskConfig } from 'ngx-mask'

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

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

関数を使用して構成：

 const maskConfigFunction : ( ) => Partial < NgxMaskConfig > = ( ) => {
  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の場合はQuickStart

バージョンのNGX-Mask <15.0.0 Angular AppでNGX-Maskモジュールをインポートします。

デフォルトのマスク構成オプションを使用します

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

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

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

独自のマスク設定オプションを渡します

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

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

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

または関数を使用して構成を取得します。

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

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

次に、入力にマスクを定義するだけです。

積極的にサポートされているバージョン

NGX-Maskは、AngularのアクティブおよびLTS（長期サポート）バージョンをサポートする公式のAngularサポートポリシーに従います。最新リリースの時点で、Angular V17以降はサポートされています。

サポートされている範囲外の角度バージョン（V17よりも古い）を使用するプロジェクトは、NGX-Maskの最後の互換バージョンを使用する必要があります。ただし、これらのバージョンでは、更新、バグ修正、または新機能を受け取りません。

Angularのバージョン化とサポートスケジュールの詳細については、公式のAngularリリースページをご覧ください。

使用法

テキストドキュメント

貢献

いくつかの貢献が大好きです！開始するには、このドキュメントをチェックしてください。