Package Exports

@ngneat/input-mask

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ngneat/input-mask) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@ngneat/input-mask

@ngneat/input-mask is an angular library that creates an input mask. Behind the scene, it uses inputmask.

Features

🔡 Support for form validation
🎭 Wrapper function to easily create input-masks
🔁 Helps you to convert final values to desired format
☝️ Single directive to handle everything
🛠 All the configurations of inputmask provided

Installation

Angular

You can install it through Angular CLI, which is recommended:

ng add @ngneat/input-mask

or with npm

npm install @ngneat/input-mask inputmask@5
npm install -D @types/inputmask@5

When you install using npm or yarn, you will also need to import InputMaskModule in your app.module:

import { InputMaskModule } from '@ngneat/input-mask';

@NgModule({
  imports: [InputMaskModule],
})
class AppModule {}

Usage examples

1. Date

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { createMask } from '@ngneat/input-mask';

@Component({
  selector: 'app-root',
  template: `
    <input [inputMask]="dateInputMask" [formControl]="dateFC" placeholder="dd/mm/yyyy">
  `,
})
export class AppComponent {
  dateInputMask = createMask<Date>({
    alias: 'datetime',
    inputFormat: 'dd/mm/yyyy',
    parser: (value: string) => {
      const values = value.split('/');
      const year = +values[2];
      const month = +values[1] - 1;
      const date = +values[0];
      return new Date(year, month, date);
    },
  });

  dateFC = new FormControl('');
}

2. IP Address

@Component({
  template: `
    <input [inputMask]="ipAddressMask" [formControl]="ipFC" placeholder="_._._._">
  `,
})
export class AppComponent {
  ipAddressMask = createMask({ alias: 'ip' });
  ipFC = new FormControl('');
}

3. Currency

@Component({
  template: `
    <input [inputMask]="currencyInputMask" [formControl]="currencyFC" placeholder="$ 0.00">
  `,
})
export class AppComponent {
  currencyInputMask = createMask({
    alias: 'numeric',
    groupSeparator: ',',
    digits: 2,
    digitsOptional: false,
    prefix: '$ ',
    placeholder: '0',
  });
  currencyFC = new FormControl('');
}

4. License Plate

@Component({
  template: `
    <input [inputMask]="licenseInputMask" [formControl]="licenseFC" placeholder="___-___">
  `,
})
export class AppComponent {
  licenseInputMask = createMask('[9-]AAA-999');
  licenseFC = new FormControl('');
}

5. Email

@Component({
  template: `
    <input [inputMask]="emailInputMask" [formControl]="emailFC" placeholder="_@_._">
  `,
})
export class AppComponent {
  emailInputMask = createMask({ alias: 'email'});
  emailFC = new FormControl('');
}

More examples

All examples are available on stackblitz.

You can create any type of input-mask which is supported by InputMask plugin.

Validation

When [inputMask] is used with [formControl], it adds validation out-of-the box. The validation works based on isValid function.

If the validation fails, the form-control will have below error:

{ inputMask: false }

`createMask` wrapper function

This library uses inputmask plugin to handle mask related tasks. So, you can use all the options available there.

The recommended way to create an inputmask is to use the createMask function provided with this library.

`parser` function

Apart from inputmask options, we have added one more option called parser. This basically helps you to keep the value of form-control in pre-defined format, without updating UI.

For example, you want your users to enter date in input[type=text] with dd/mm/yyyy format and you want to store a Date value in the form-control:

@Component({
  template: `
    <input [inputMask]="dateInputMask" [formControl]="dateFC" placeholder="dd/mm/yyyy">
  `,
})
export class AppComponent {
  dateInputMask = createMask<Date>({
    alias: 'datetime',
    inputFormat: 'dd/mm/yyyy',
    parser: (value: string) => {
      const values = value.split('/');
      const year = +values[2];
      const month = +values[1] - 1;
      const date = +values[0];
      return new Date(year, month, date);
    },
  });

  dateFC = new FormControl('');
}

In above example, whenver you try to access dateFC.value, it won't be the string which user entered, but rather a Date created based on the parser function.