Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fundsaccess/angular-iban
IBAN directives and pipes for Angular
https://github.com/fundsaccess/angular-iban
Last synced: 23 days ago
JSON representation
IBAN directives and pipes for Angular
- Host: GitHub
- URL: https://github.com/fundsaccess/angular-iban
- Owner: fundsaccess
- License: mit
- Created: 2018-12-21T11:23:11.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T21:41:14.000Z (6 months ago)
- Last Synced: 2024-11-06T17:53:22.721Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 2.83 MB
- Stars: 17
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-iban - IBAN directives and pipes for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-iban - IBAN directives and pipes for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-iban - IBAN directives and pipes for Angular. (Table of contents / Third Party Components)
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:
```shell
npm install --save angular-iban iban
```
yarn:
```shell
yarn add angular-iban iban
```
## Import
Once installed you need to import the main module:
```typescript
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
```typescript
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 {
}
```
```html
IBAN:
IBAN is required.
IBAN is invalid
IBAN is valid.
```
```typescript
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
```typescript
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 {
}
```
```html
IBAN:
IBAN is required.
IBAN is invalid
IBAN is valid.
```
### IBAN Formatter
```html
before
DE12500105170648489890
set pipe
{{ibanGermany | ibanFormatter}}
after
DE12 5001 0517 0648 4898 90
```
## 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)