UNPKG

ngx-iban

Version:

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

86 lines (62 loc) 2.04 kB
# 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](https://mmjmanders.github.io/ngx-iban/). **Important note**: From version 17.3.0 onward this library exports [standalone components](https://angular.io/guide/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 | | 20.x | 20.x | ## Usage ### Directive ```ts 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 ```html <span>{{ 'GB82WEST12345698765432' | iban }}</span> ``` becomes ```html <span>GB82 WEST 1234 5698 7654 32</span> ``` Of course don't forget to import `IbanPipe` in your component. ### Validator ```ts import { ibanValidator } from "ngx-iban"; new FormControl("", ibanValidator()); ```