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
19.x	19.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());