ngx mask

Máscara NGX

NGX Mask é a melhor diretiva para resolver a entrada de mascaramento com o padrão necessário

Você também pode experimentar a verificação do indicador de carregador NGX. Você também pode experimentar nossa verificação de CopyPaste da NGX.

Você pode tentar documentação ao vivo com exemplos

Instalação

Versão angular 17.xx

$ npm install --save ngx-mask

Versão angular 16.xx

$ npm install --save [email protected]

Versão angular 15.xx

$ npm install --save [email protected]

Versão angular 14.xx

$ npm install --save [email protected]

Versão angular 13.xx ou 12.xx

$ npm install --save [email protected]

QuickStart se NGX-mask versão> = 15.0.0

Importar diretiva de máscara ngx , tubo e fornecer provedores de máscara ngx com função provideNgxMask .

Com o nível de aplicativo de opções de configuração padrão

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

Passando suas próprias opções de configuração de máscara

 import { NgxMaskConfig } from 'ngx-mask'

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

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

Usando uma função para configurar:

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

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

Com o nível de recurso de opções de configuração

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

Em seguida, Importar Diretiva, tubo para o componente independente necessário e apenas definir máscaras nas entradas.

Com módulos angulares

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

Iniciar o Quick If NGX-mask versão <15.0.0

Para a versão ngx-mask <15.0.0 Importar módulo NGX-MASK no aplicativo angular.

Com opções de configuração de máscara padrão

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

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

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

Passando suas próprias opções de configuração de máscara

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

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

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

Ou usando uma função para obter a configuração:

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

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

Em seguida, basta definir máscaras nas entradas.

Versões ativamente suportadas

O NGX-MASK segue a política de apoio angular oficial, apoiando as versões Ativo e LTS (suporte a longo prazo) do Angular. Até o último lançamento, o Angular V17 e o novo são suportados.

Os projetos que usam versões angulares fora do intervalo suportado (por exemplo, mais antigo que o V17) devem usar a última versão compatível do NGX-mask. No entanto, essas versões não receberão mais atualizações, correções de bugs ou novos recursos.

Para obter informações detalhadas sobre o cronograma de versões e suporte da Angular, visite a página oficial do Angular Lankes.

Uso

Documentação de texto

Contribuindo

Adoraríamos algumas contribuições! Confira este documento para começar.