Angular Bootstrap Auto Format Inputs

Angular Auto Format Inputs - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

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

Live preview

Credit card number MDB Pro component

Use the mdbCreditCard directive to add credit card number formatting to an input. The directive supports 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 the API section for more details 

        
            
            <div class="row">
              <div class="col-md-10">
                <div class="md-form">
                  <input mdbInput 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">
                  <mdb-icon fas icon="credit-card" size="4x" *ngIf="!card.cardName"></mdb-icon>
                  <mdb-icon fab icon="cc-{{ card.cardName }}" size="4x" *ngIf="card.cardName"></mdb-icon>
                </div>
              </div>
            </div>

Add cards programmatically

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

        
            
            <div class="md-form">
              <input mdbInput 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 'ng-uikit-pro-standard';
  
            @Component({
              selector: 'add-cards',
              templateUrl: './add-cards.component.html',
            })
            export class AddCardsComponent implements OnInit {
              @ViewChild('card', { static: true }) 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 an array of card objects to the [additionalCards] input to update the mdbCreditCard directive with new credit card types. 

        
            
            <div class="md-form">
              <input mdbInput 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 the mdbCvv directive to add CVV number formatting to an input.

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

Date MDB Pro component

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

        
            
            <div class="md-form">
              <input mdbInput 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. 

        
            
          import { AutoFormatModule, InputsModule, WavesModule } from 'ng-uikit-pro-standard'
Import example Modules list

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