Rate this docs

Angular Bootstrap auto format inputs

Angular Auto Format Inputs - Bootstrap 4 & Material Design

Angular Bootstrap auto format inputs is a collection of directives which can be used to format inputs automatically as the user type.

Check following live examples to see how you can use our directives in your project:

Live preview

Credit card number MDB Pro component

Use mdbCreditCard directive to add credit card number formatting to an input. The directive support six card types by default: Visa, MasterCard, Dinners Club, JCB, Discover and American Express. You can add more card types programatically or by using [additionalCard] input. Check API section for more details


<div class="row">
  <div class="col-md-10">
    <div class="md-form">
      <input mdbInputDirective mdbCreditCard #card="mdbCreditCard" id="form1" class="form-control" type="text">
      <label for="form1" class="">Card Number</label>
    </div>
  </div>

  <div class="col-md-2">
    <div class="d-flex align-items-center">
      <i *ngIf="!card.cardName" class="fa fa-4x fa-credit-card"></i>
      <i *ngIf="card.cardName" class="fa fa-4x fa-cc-{{card.cardName}}"></i>
    </div>
  </div>
</div>
        

Add cards programatically

Use @ViewChild decorator to get access to the mdbCreditCard directive in your typescript file, then pass array of new card types to the addCards method.


    <div class="md-form">
      <input mdbInputDirective mdbCreditCard #card="mdbCreditCard" id="form1" class="form-control" type="text">
      <label for="form1" class="">Card Number</label>
    </div>
        

import { Component, ViewChild, OnInit } from '@angular/core';
import { MdbCreditCardDirective } from '../lib/ng-uikit-pro-standard/pro/date-format/mdb-credit-card.directive';

@Component({
  selector: 'add-cards',
  templateUrl: './add-cards.component.html',
})
export class AddCardsComponent implements OnInit {
  @ViewChild('card') cardInput: MdbCreditCardDirective;

  additionalCards = [
    {
      name: 'myNewCard',
      fullName: 'My New Card',
      re: /^9[47]\d{0,13}/,
      pattern: /(\d{1,4})/g,
      maxLength: 19,
      cvvLength: 4
    },
    {
      name: 'myNewCard1',
      fullName: 'My New Card 1',
      re: /^(?:39\d{0,2})\d{0,12}/,
      pattern: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
      maxLength: 16,
      cvvLength: 3
    },
  ];

  ngOnInit() {
    this.cardInput.addCards(this.additionalCards);
  }
}
            

Add cards using input

Pass array of cards objects to [additionalCards] input to update the mdbCreditCard directive with new credit card types.


    <div class="md-form">
      <input mdbInputDirective mdbCreditCard [additionalCard]="additionalCards" id="form1" class="form-control" type="text">
      <label for="form1" class="">Card Number</label>
    </div>
        

import { Component } from '@angular/core';

@Component({
  selector: 'add-cards-input',
  templateUrl: './add-cards-input.component.html',
})
export class AddCardsInputComponent {

  additionalCards = [
    {
      name: 'myNewCard',
      fullName: 'My New Card',
      re: /^9[47]\d{0,13}/,
      pattern: /(\d{1,4})/g,
      maxLength: 19,
      cvvLength: 4
    },
    {
      name: 'myNewCard1',
      fullName: 'My New Card 1',
      re: /^(?:39\d{0,2})\d{0,12}/,
      pattern: /(\d{1,4})(\d{1,6})?(\d{1,5})?/,
      maxLength: 16,
      cvvLength: 3
    },
  ];
}
            

Credit card CVV MDB Pro component

Use mdbCvv directive to add CVV number formatting to an input.


                <div class="md-form">
                    <input mdbInputDirective mdbCvv id="form3" class="form-control" type="text">
                    <label for="form3" class="">CVV</label>
                </div>
            

Date MDB Pro component

Use mdbDateFormat directive to add date formatting to an input element. Add [format] input to choose formatting pattern and [separator] input to change a string that appears between parts of the formatted date.


                <div class="md-form">
                  <input mdbInputDirective mdbDateFormat id="form4" class="form-control" type="text">
                  <label for="form4" class="">Date format</label>
                </div>
            

Angular Auto Format Inputs - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of auto format inputs directives.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// For MDB Angular Pro
import { AutoFormatModule, InputsModule, WavesModule } from 'ng-uikit-pro-standard'

Directives

MdbCreditCard

Selector: mdbCreditCard

Type: MdbCreditCardDirective

Export as: mdbCreditCard

MdbCvv

Selector: mdbCvv

Type: MdbCvvDirective

MdbDateFormat

Selector: mdbDateFormat

Type: MdbDateFormatDirective


Inputs

MdbCreditCard
Name Type Default Description Example
additionalCards CreditCard - Allow to add new card types [additionalCards]="[{...}, {...}]"
separator string ' ' Specifies string that will be placed between parts of formatted number [separator]="'-'"
CreditCard type

Type used for new cards object has following properties:

Name Type Default Description Example
name string - Short name that describes card (can be used with font awesome icons) amex
fullName string - Full card name American Express
re RegExp - Regular expression pattern used to find specific card by its number /^4\d{0,15}/
pattern RegExp - Regular expression pattern used to format card number /(\d{1,4})/g
maxLength number - Maximum length of card number 16
cvvLength number - Length of card CVV number 3
MdbDateFormat
Name Type Default Description Example
format string[] ['dd', 'mm', 'yyyy'] Specifies date format pattern [format]="['mm', 'yy']"
separator string / Specifies string that will be placed between parts of formatted date [separator]="'-'"

Methods

You can get access to public methods of the directives from another component

MdbCreditCard
Name Description
addCards(cards: CreditCard[]) Updates default card types with new ones specified in the array