/angular-forms-input-mask

Mask your @angular/forms formControl inputs with these directives!

Primary LanguageTypeScriptMIT LicenseMIT

angular-forms-input-mask

angular-forms-input-mask

Mask your @angular/forms formControl inputs with these directives!

CI CD

Features 🔎

  • add to existitng inputs or wrappers to have it masked without further needs;
  • enable custom validation over the mask format for the existing formControls without trouble;
  • keep a good user experience by automatically placing the cursor positions while typing or backspacing naturally;
  • add any number of masks formats to a single input.

Check out all the possibilities at the demo landpage.

Usage 🔌

  1. Install: npm install angular-forms-input-masks or yarn add angular-forms-input-masks;
  2. import AngularFormsInputMasksModule module to your appModules or to the module to be used at;
  3. declare at any input or input wrapper the directives to supply your needs.

e.g.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { ReactiveFormsModule } from '@angular/forms';
  import { AngularFormsInputMasksModule } from 'angular-forms-input-masks';
  import { AppComponent } from './app.component';

  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      AngularFormsInputMasksModule,
      ReactiveFormsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

  [...]

  <input formControlName="sampleInput" angularFormsCurrency/>
  <input [ngControl]="sampleGroup.get('sampleInput')" angularFormsMask="DDD-DDD-DDDD/>

Options 📗

Mask Directive Parameters:

  • ngControl: required to work, either through formControlName or ngControl declaration. Always requires ngControl if the directive is used at an input wrapper.
  • angularFormsMask: the mask or masks that are to be displayed. Format: D: numbers; C: letters; W: both; All other characters are treated as part of the mask and are just displayed. e.g. 'DDD.DDD.WW', ['DDD.DD', '(CC) WW - D'].
  • validateMaskInput: add validation to formControl, so that the input should match the mask length, else it returns invalidLength validation error at the ngControl.
  • unmasked: set the unmasked value to the formControl instead of the masked one, defaults to false.

Currency Directive Parameters:

  • ngControl: required to work, either through formControlName or ngControl declaration. Always requires ngControl if the directive is used at an input wrapper.
  • prefix: defaults to $, allows any value or empty.
  • thousandsSeparator: defaults to white_space.
  • decimalSeparator: defaults to ..
  • digitsAfterSeparator: defaults to 2.
  • maxIntegerDigits: how big the value allowed is, defaults to 8. (e.g 1 000 000,00)
  • allowNegatives: defaults to false.
  • validateOnInit: if marked, it will validate the initial value and mask it. In case it is null, will fill the masked value for 0. Defaults to true.

Develop 👷

For running locally:

  1. npm run build-lib
  2. npm start
  3. open at: localhost:4200

Composition 🔨

Anything else ❓

Feel free to contribute, report bugs, or contact me for anything.