Package Exports

ngx-iban

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-iban) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-iban

This Angular 7 module consists of three parts:

a directive to use in template-driven forms;
a validator to use in reactive forms;
a pipe to transform a string to the IBAN format (groups of 4 characters)

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.

Installation

You can install ngx-iban via:

npm install ibantools ngx-iban --save

yarn add ibantools 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

Usage

import { NgModule } from "@angular/core";
import { NgxIbanModule } from "ngx-iban";

@NgModule({
  imports: [NgxIbanModule]
})
export class AppModule {}

Template-driven forms

<form>
  <input type="text" [(ngModel)]="iban" ngxIban>

  <!-- Or with an ISO 3166-1 alpha-2 country code -->
  <input type="text" [(ngModel)]="iban" ngxIban="NL">
</form>

Reactive forms

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";
import { ibanValidator } from "ngx-iban";

@Component({
  selector: "my-component",
  styleUrls: ["./my.component.scss"],
  templateUrl: "./my.component.html"
})
export class MyComponent {
  iban = new FormControl("", ibanValidator());

  // Or with an ISO 3166-1 alpha-2 country code
  iban = new FormControl("", ibanValidator("NL"));
}

<form>
  <input type="text" [formControl]="iban">
</form>

Pipe

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

becomes

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