Input Mask

Angular Bootstrap 5 Input Mask plugin

The Input Mask is a custom directive which allows to set a predefined format of forms.

Responsive Input Mask directive for the latest Bootstrap 5. Set a predefined format of forms. Phone number, special characters, clear incomplete & other examples.

Note: Read the API tab to find all available options and advanced customization

Basic example

Input Mask comes with three predefined masks directives:

  • a - Alpha characters (defaut: A-Z,a-z)
  • 9 - Numeric characters (0-9)
  • * - Alphanumeric characters (A-Z,a-z,0-9)

To initialize Input Mask on element add mdbInputMask directive passing the mask format string to said directive. 

<mdb-form-control>
  <input
    mdbInputMask="aaa999***"
    type="text"
    id="form1"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form1">Basic example</label>
</mdb-form-control>

Clear incomplete

By default, Input Mask will clear incomplete input value on blur. Turn this behavior off with [clearIncomplete]="false". 

<mdb-form-control>
  <input
    mdbInputMask="aaa999***"
    [clearIncomplete]="false"
    type="text"
    id="form2"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form2">Clear incomplete</label>
</mdb-form-control>

Custom mask

Define custom mask with [customMask] for mask symbol and [customValidator] with custom mask regex pattern. Example below will only allow abc letters to be typed for p mask. 

<mdb-form-control>
  <input
    mdbInputMask="999ppp999"
    [customValidator]="'[abc]'"
    [customMask]="'p'"
    type="text"
    id="form3"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form3">Custom mask</label>
</mdb-form-control>

You can also set more than one mask by passing multiple characters separated by comma to [customMask], and their coresponding validators separated by comma to [customValidator] 

<mdb-form-control>
  <input
    mdbInputMask="pppbbbccc"
    [customValidator]="'[abc],[1-2],[^a-c]'"
    [customMask]="'p,b,c'"
    type="text"
    id="form6"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form6">Custom mask</label>
</mdb-form-control>

Special characters

Input Mask allows any non alphanumeric character to be used inside the mdbInputMask directive. Those characters will be hardcoded into the input during typing 

<mdb-form-control class="mb-4">
  <input
    mdbInputMask="+48 999-999-999"
    type="text"
    id="form7"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form7">Default placeholder</label>
</mdb-form-control>
<mdb-form-control>
  <input
    mdbInputMask="ISBN 0-99999-999-0"
    type="text"
    id="form8"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form8">Custom placeholder</label>
</mdb-form-control>

Mask placeholder

Set placeholder for mask while typing with [maskPlaceholder]="true". Default placeholder is an underscore sign _. Change it with [charPlaceholder] input. You can use single character or define placeholder for whole mask 

<mdb-form-control class="mb-4">
  <input
    mdbInputMask="(99)-999-99"
    [maskPlaceholder]="true"
    type="text"
    id="form7"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form7">Default placeholder</label>
</mdb-form-control>
<mdb-form-control>
  <input
    mdbInputMask="99/99/9999 99:99"
    [maskPlaceholder]="true"
    [charPlaceholder]="'dd/mm/yyyy hh:mm'"
    type="text"
    id="form8"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form8">Custom placeholder</label>
</mdb-form-control>

Phone number input mask

Input mask can be used with Autocomplete to create an international phone number input. When user selects a country, input mask will be updated with mask pattern used in selected country. Please remember to import MdbAutocompleteModule for this example. 

<mdb-form-control style="width: 5rem; display: inline-block; margin-right: 0.25rem">
  <input
    mdbInput
    [ngModel]="searchText | async"
    (ngModelChange)="searchText.next($event)"
    [mdbAutocomplete]="autocomplete"
    type="text"
    id="form1"
    class="form-control"
  />
  <label mdbLabel class="form-label" for="form1">Code</label>
</mdb-form-control>

<mdb-autocomplete #autocomplete="mdbAutocomplete" (selected)="onSelected($event)">
  <mdb-option *ngFor="let result of results | async as results" [value]="result.code">
    <div class="d-flex justify-content-between flex-fill">
      <div><i class="flag flag-{{ result.flag }}"></i></div>
      <div class="flex-fill text-center">{{ result.code }}</div>
    </div>
  </mdb-option>
  <div *ngIf="notFound" class="autocomplete-no-results">No results found</div>
</mdb-autocomplete>

<mdb-form-control style="display: inline-block">
  <input
    [mdbInputMask]="inputMask"
    [maskPlaceholder]="true"
    [clearIncomplete]="false"
    type="text"
    id="form2"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form2">Phone number</label>
</mdb-form-control>
import { Component } from '@angular/core';
import { MdbAutocompleteSelectedEvent } from 'mdb-angular-ui-kit/autocomplete';
import { Observable, Subject, map, startWith, tap } from 'rxjs';

interface CountryData {
  code: string;
  flag: string;
  inputMask: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  searchText = new Subject<string>();
  results: Observable<CountryData[]>;
  notFound = false;
  inputMask = '';
  data: CountryData[] = [
    {
      code: '86',
      flag: 'china',
      inputMask: '(99) 9999999',
    },
    {
      code: '33',
      flag: 'france',
      inputMask: '99 99 99 99 99',
    },
    {
      code: '44',
      flag: 'united-kingdom',
      inputMask: '9999 999 999',
    },
    {
      code: '1',
      flag: 'united-states',
      inputMask: '(999) 999-9999',
    },
    {
      code: '58',
      flag: 'venezuela',
      inputMask: ' 999-9999999',
    },
  ];

  constructor() {
    this.results = this.searchText.pipe(
      startWith(''),
      map((value: string) => this.filter(value)),
      tap((results: CountryData[]) =>
        results.length > 0 ? (this.notFound = false) : (this.notFound = true)
      )
    );
  }

  filter(value: string): CountryData[] {
    const filterValue = value.toLowerCase();
    return this.data.filter((country: CountryData) =>
      country.code.toLowerCase().includes(filterValue)
    );
  }

  onSelected(event: MdbAutocompleteSelectedEvent) {
    this.inputMask = this.data.find((country) => country.code === event.option.value).inputMask;
  }
}

Input Mask - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/input-mask

Import

import { MdbInputMaskModule } from 'mdb-angular-input-mask';
…
@NgModule ({
  ...
  imports: [MdbInputMaskModule],
  ...
})

Usage

Input Mask comes with three predefined masks formats:

  • a - Alpha characters (defaut: A-Z,a-z)
  • 9 - Numeric characters (0-9)
  • * - Alphanumeric characters (A-Z,a-z,0-9)

To initialize Input Mask on element add mdbInputMask directive passing the mask format to input. 

<mdb-form-control>
  <input
    mdbInputMask="aaa999***"
    type="text"
    id="form1"
    class="form-control"
    autocomplete="off"
  />
  <label mdbLabel class="form-label" for="form1">Basic example</label>
</mdb-form-control>

Inputs

Name Type Default Description
mdbInputMask String "" Defines Input Mask pattern to be added to input element
[charPlaceholder] String "_" Placeholder character for covered characters in mask. Visible while typing only when [maskPlaceholder] is set to true
[maskPlaceholder] Boolean false Sets [charPlaceholder] on or off
[inputPlaceholder] Boolean true Shows information about the mask pattern on inactive input
[clearIncomplete] Boolean true Clear incomplete input value on blur
[customMask] String "" Defines character to be used as custom mask. Allows multiple characters to be passed, separated by comma
[customValidator] String "" Regex pattern to match characters in mask. Allows multiple validators corespondiing to their masks to be passed, separated by comma.

Outputs

Name Type Description
inputMaskInput EventEmitter<any> Emitted when Inputmask instance element receives new value. Returns value object inside event callback with input typed characters.
inputMaskComplete EventEmitter<any> Emitted when Inputmask instance element receives completed mask pattern value. Returns value object inside event callback with completed value. 
<mdb-form-control>
  <input
    mdbInputMask="aaa999***"
    type="text"
    id="form1"
    class="form-control"
    autocomplete="off"
    (inputMaskInput)="onInputMaskInput($event)"
  />
  <label mdbLabel class="form-label" for="form1">Basic example</label>
</mdb-form-control>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  onInputMaskInput(event: any) {
    console.log('input mask: ', event);
  }
}