This Angular (7+) library consists of three parts:
npm install ngx-ibanThis 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.
Use your favorite package manager to install ngx-iban and ibantools.
| 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 |
``ts
import { Component } from "@angular/core";
import { IbanDirective } from "ngx-iban";
@Component({
imports: [IbanDirective],
selector: "my-component",
template:
})
export class MyComponent {}
$3
html
{{ 'GB82WEST12345698765432' | iban }}
`becomes
html
GB82 WEST 1234 5698 7654 32
`Of course don't forget to import
in your component.$3
`ts
import { ibanValidator } from "ngx-iban";new FormControl("", ibanValidator());
``