ngx mask

Topeng NGX

NGX Mask adalah arahan terbaik untuk menyelesaikan input masking dengan pola yang diperlukan

Anda juga dapat mencoba pemeriksaan indikator NGX Loader kami. Anda juga dapat mencoba pemeriksaan NGX Copypaste kami.

Anda dapat mencoba dokumentasi langsung dengan contoh

Menginstal

Versi Angular 17.xx

$ npm install --save ngx-mask

Versi Angular 16.xx

$ npm install --save [email protected]

Versi Angular 15.xx

$ npm install --save [email protected]

Versi Angular 14.xx

$ npm install --save [email protected]

Versi sudut 13.xx atau 12.xx

$ npm install --save [email protected]

QuickStart jika versi NGX-mask> = 15.0.0

Impor NGX-Mask Directive, Pipa dan berikan fungsi NGXMASK untuk Fungsi provideNgxMask .

Dengan level aplikasi opsi konfigurasi default

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

Melewati opsi konfigurasi topeng Anda sendiri

 import { NgxMaskConfig } from 'ngx-mask'

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

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

Menggunakan fungsi untuk mengonfigurasi:

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

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

Dengan level fitur opsi konfigurasi

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

Kemudian, impor arahan, pipa untuk komponen mandiri yang dibutuhkan dan cukup tentukan masker dalam input.

Dengan modul sudut

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

QuickStart jika versi NGX-mask <15.0.0

Untuk versi NGX-mask <15.0.0 Impor Modul NGX-Mask di Aplikasi Angular.

Dengan opsi konfigurasi mask default

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

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

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

Melewati opsi konfigurasi topeng Anda sendiri

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

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

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

Atau menggunakan fungsi untuk mendapatkan konfigurasi:

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

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

Kemudian, cukup tentukan topeng dalam input.

Versi yang didukung secara aktif

NGX-Mask mengikuti kebijakan dukungan sudut resmi, mendukung versi aktif dan LTS (dukungan jangka panjang) dari Angular. Pada rilis terbaru, Angular V17 dan yang lebih baru didukung.

Proyek menggunakan versi sudut di luar rentang yang didukung (misalnya, lebih tua dari V17) harus menggunakan versi terakhir NGX-mask yang kompatibel. Namun, versi ini tidak akan lagi menerima pembaruan, perbaikan bug, atau fitur baru.

Untuk informasi terperinci tentang jadwal versi dan dukungan Angular, kunjungi halaman Rilis Angular Resmi.

Penggunaan

Dokumentasi teks

Berkontribusi

Kami akan menyukai beberapa kontribusi! Lihat dokumen ini untuk memulai.