ngx mask

Masque NGX

Le masque NGX est la meilleure directive pour résoudre l'entrée de masquage avec le modèle nécessaire

Vous pouvez également essayer notre vérification de l'indicateur de chargeur NGX. Vous pouvez également essayer notre vérification NGX Copypaste.

Vous pouvez essayer la documentation en direct avec des exemples

Installation

Version angulaire 17.xx

$ npm install --save ngx-mask

Version angulaire 16.xx

$ npm install --save [email protected]

Version angulaire 15.xx

$ npm install --save [email protected]

Version angulaire 14.xx

$ npm install --save [email protected]

Version angulaire 13.xx ou 12.xx

$ npm install --save [email protected]

QuickStart If Ngx-mask version> = 15.0.0

Importez la directive NGX-Mask , Pipe et fournissent des fournisseurs NGXMask avec la fonction provideNgxMask .

Avec le niveau d'application des options de configuration par défaut

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

Passer vos propres options de configuration de masque

 import { NgxMaskConfig } from 'ngx-mask'

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

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

Utilisation d'une fonction pour configurer:

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

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

Avec le niveau de fonction des options de configuration

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

Ensuite, la directive d'importation, le tuyau vers le composant autonome nécessaire et définissez simplement les masques dans les entrées.

Avec des modules angulaires

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

QuickStart If Ngx-mask version <15.0.0

Pour la version Ngx-mask <15.0.0 Importez le module NGX-mask dans l'application angulaire.

Avec des options de configuration de masque par défaut

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

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

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

Passer vos propres options de configuration de masque

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

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

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

Ou en utilisant une fonction pour obtenir la configuration:

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

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

Ensuite, définissez simplement les masques dans les entrées.

Versions activement prises en charge

Ngx-Mask suit la politique officielle de support angulaire, soutenant les versions actifs et LTS (support à long terme) d'Angular. Depuis la dernière version, Angular V17 et NEWER sont pris en charge.

Les projets utilisant des versions angulaires en dehors de la plage prise en charge (par exemple, plus ancienne que V17) devraient utiliser la dernière version compatible de NGX-mask. Cependant, ces versions ne recevront plus de mises à jour, de corrections de bogues ou de nouvelles fonctionnalités.

Pour des informations détaillées sur le calendrier du versioning et du support d'Angular, visitez la page officielle des versions angulaires.

Usage

Documentation texte

Contributif

Nous aimerions quelques contributions! Consultez ce document pour commencer.