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 four 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. From version 21.0.0 the NgxIbanModule doesn't event exist anymore.

Installation

Use your favorite package manager to install ngx-iban.

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