ngx mask

Máscara NGX

NGX Mask es la mejor directiva para resolver la entrada de enmascaramiento con el patrón necesario

También puede probar nuestra verificación del indicador del cargador NGX. También puede probar nuestra verificación NGX CopyPaste.

Puede probar la documentación en vivo con ejemplos

Instalación

Angular versión 17.xx

$ npm install --save ngx-mask

Angular versión 16.xx

$ npm install --save [email protected]

Angular versión 15.xx

$ npm install --save [email protected]

Angular versión 14.xx

$ npm install --save [email protected]

Angular versión 13.xx o 12.xx

$ npm install --save [email protected]

QuickStart si la versión NGX-Mask> = 15.0.0

Importar la Directiva NGX-Mask , PUPE y proporcionar a los proveedores de NGXMAK la función provideNgxMask .

Con el nivel de aplicación de opciones de configuración predeterminadas

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

Pasando sus propias opciones de configuración de máscara

 import { NgxMaskConfig } from 'ngx-mask'

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

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

Uso de una función para configurar:

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

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

Con opciones de configuración nivel de característica

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

Luego, importe la Directiva, la tubería al componente independiente necesario y simplemente defina máscaras en las entradas.

Con módulos angulares

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

QuickStart si la versión NGX-Mask <15.0.0

Para la versión NGX-Mask <15.0.0 Importar el módulo NGX-Mask en la aplicación Angular.

Con opciones de configuración de máscara predeterminadas

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

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

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

Pasando en sus propias opciones de configuración de máscara

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

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

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

O usando una función para obtener la configuración:

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

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

Luego, solo defina máscaras en las entradas.

Versiones de apoyo activamente

NGX-Mask sigue la política oficial de soporte angular, que respalda las versiones activas y LTS (soporte a largo plazo) de Angular. A partir del último lanzamiento, Angular V17 y Newer son compatibles.

Los proyectos que utilizan versiones angulares fuera del rango compatible (por ejemplo, más antiguo que V17) deben usar la última versión compatible de NGX-Mask. Sin embargo, estas versiones ya no recibirán actualizaciones, correcciones de errores o nuevas funciones.

Para obtener información detallada sobre el cronograma de versiones y soporte de Angular, visite la página oficial de versiones angulares.

Uso

Documentación de texto

Que contribuye

¡Nos encantaría algunas contribuciones! Mira este documento para comenzar.