NGX MASK is the best directive to solve masking input with needed pattern
You can also try our NGX LOADER INDICATOR check. You can also try our NGX COPYPASTE check.
You can try live documentation with examples
Angular version 17.x.x
$ npm install --save ngx-maskAngular version 16.x.x
$ npm install --save ngx-mask@16.4.2Angular version 15.x.x
$ npm install --save ngx-mask@15.2.3Angular version 14.x.x
$ npm install --save ngx-mask@14.3.3Angular version 13.x.x or 12.x.x
$ npm install --save ngx-mask@13.2.2Import ngx-mask directive, pipe and provide NgxMask providers with provideNgxMask function.
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 {}Then, import directive, pipe to needed standalone component and just define masks in inputs.
@NgModule({
imports: [
NgxMaskDirective, NgxMaskPipe
],
providers: [provideNgxMask()]
})For version ngx-mask < 15.0.0 Import ngx-mask module in Angular app.
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),
],
})Or using a function to get the config:
const maskConfigFunction: () => Partial<NgxMaskConfig> = () => {
return {
validation: false,
};
};
@NgModule({
imports: [
NgxMaskModule.forRoot(maskConfigFunction),
],
})Then, just define masks in inputs.
Text documentation
We would love some contributions! Check out this document to get started.
