ngx-iban

ngx-iban

This Angular (7+) library consists of three parts:

1. a directive to use in forms;
2. a pipe to transform a string to the IBAN format (groups of 4 characters);
3. a validator to use in reactive forms;

An optional ISO 3166-1 alpha-2 country code can be passed as a parameter to both the directive and the validator. When given, validation also checks if the entered IBAN is valid for that specific country.

You can see a live demo of the module here.

Important note: From version 17.3.0 onward this library exports standalone components. This mitigates the need to import NgxIbanModule.

Installation

Just use your favorite package manager to install ngx-iban and ibantools.

Compatibility table

ngx-iban	Angular
7.x	7.x
8.x	8.x
9.x	9.x
10.x	10.x
11.x	11.x
12.x	12.x
13.x	13.x
14.x	14.x
15.x	15.x
16.x	16.x
17.x	17.x
18.x	18.x

Usage

Directive

import { Component } from "@angular/core";
import { IbanDirective } from "ngx-iban";

@Component({
  imports: [IbanDirective],
  selector: "my-component",
  template: `
    <form>
      <input type="text" [(ngModel)]="iban" ngxIban>
      
      <!-- Or with an ISO 3166-1 alpha-2 country code -->
      <input type="text" [(ngModel)]="iban" ngxIban="NL">
      
      <!-- Or in a reactive form -->
      <input type="text" [formControl]="iban" ngxIban>
    </form>
  `
})
export class MyComponent {}

Pipe

<span>{{ 'GB82WEST12345698765432' | iban }}</span>

becomes

<span>GB82 WEST 1234 5698 7654 32</span>

Of course don't forget to import IbanPipe in your component.

Validator

import { ibanValidator } from "ngx-iban";

new FormControl("", ibanValidator());