angular-iban
v18.0.0
Published
Angular directives and pipes for IBAN
Downloads
47,647
Readme
Angular-iban
Angular directives and pipes for IBAN
Demo: https://fundsaccess.github.io/angular-iban/
Version compatibility
This library supports Angular 7+. Please check the Version compatibility below to choose the correct version to install.
| angular-iban | Angular | |:------------:|:-------:| | 0.2.0 | 7.x | | 1.x | 8.x | | 2.x | 9.x | | 3.x | 10.x | | 4.x | 11.x | | 5.x | 12.x | | 6.x | 13.x | | 14.x | 14.x | | 15.x | 15.x | | 16.x | 16.x | | 17.x | 17.x | | 18.x | 18.x |
Installation
npm:
npm install --save angular-iban iban
yarn:
yarn add angular-iban iban
Import
Once installed you need to import the main module:
import { AngularIbanModule } from 'angular-iban';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [],
imports: [AngularIbanModule],
})
export class Module {
}
Usage
Some sample accounts
https://www.iban-bic.com/sample_accounts.html
IBAN Validator with reactive form
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularIbanModule } from 'angular-iban';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [],
imports: [
BrowserModule,
AngularIbanModule,
ReactiveFormsModule,
],
})
export class Module {
}
<form [formGroup]="reactiveForm" autocomplete="off" novalidate>
<div class="form-group row">
<label for="ibanReactive" class="col-sm-2 col-form-label">IBAN: </label>
<input type="text" class="form-control" id="ibanReactive" name="ibanReactive" formControlName="ibanReactive" required>
</div>
<div *ngIf="reactiveForm.get('ibanReactive')?.invalid && (reactiveForm.get('ibanReactive')?.dirty || reactiveForm.get('ibanReactive')?.touched)"
class="alert alert-danger">
<div *ngIf="reactiveForm.get('ibanReactive')?.errors?.['required']">
IBAN is required.
</div>
<div *ngIf="reactiveForm.get('ibanReactive')?.errors?.['iban']">
IBAN is invalid
</div>
</div>
<div *ngIf="reactiveForm.get('ibanReactive')?.valid && (reactiveForm.get('ibanReactive')?.dirty || reactiveForm.get('ibanReactive')?.touched)"
class="alert alert-danger">
IBAN is valid.
</div>
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ValidatorService } from 'angular-iban';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
public reactiveForm = new FormGroup({
ibanReactive: new FormControl(
null,
[
Validators.required,
ValidatorService.validateIban,
],
),
});
}
IBAN Validator with template driven form
import { BrowserModule } from '@angular/platform-browser';
import { AngularIbanModule } from 'angular-iban';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
@NgModule({
declarations: [],
imports: [
BrowserModule,
AngularIbanModule,
FormsModule
],
})
export class Module {
}
<form name="templateDrivenForm" novalidate>
<div class="form-group row">
<label for="iban" class="col-sm-2 col-form-label">IBAN:</label>
<input id="iban" name="iban" class="form-control" #iban="ngModel" type="text" ibanValidator [(ngModel)]="testIban" [ngModelOptions]="{standalone: true}" required autocomplete="off">
<div *ngIf="iban.invalid && (iban.dirty || iban.touched)"
class="alert alert-danger">
<div *ngIf="iban.errors.['required']">
IBAN is required.
</div>
<div *ngIf="iban.errors.['iban']">
IBAN is invalid
</div>
</div>
<div *ngIf="iban.valid && (iban.dirty || iban.touched)"
class="alert alert-danger">
IBAN is valid.
</div>
</div>
</form>
IBAN Formatter
before
<p>DE12500105170648489890</p>
set pipe
<p>{{ibanGermany | ibanFormatter}}</p>
after
<p>DE12 5001 0517 0648 4898 90</p>
Demo
https://fundsaccess.github.io/angular-iban/
or
Run ng serve
for a dev server. Navigate to http://localhost:4200/
.
License
Copyright (c) 2018 - 2024 fundsaccess AG. Licensed under the MIT License (MIT)