Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-iban

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-iban

Angular directives and pipes for IBAN

  • 2.0.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.4K
decreased by-2.05%
Maintainers
1
Weekly downloads
 
Created
Source

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-ibanAngular
0.2.07.x
1.x8.x
2.x9.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 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 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="ibanReactive.invalid && (ibanReactive.dirty || ibanReactive.touched)"
         class="alert alert-danger">

      <div *ngIf="ibanReactive.errors.required">
        IBAN is required.
      </div>
      <div *ngIf="ibanReactive.errors.iban">
        IBAN is invalid
      </div>

    </div>
    <div *ngIf="ibanReactive.valid && (ibanReactive.dirty || ibanReactive.touched)"
         class="alert alert-danger">
      IBAN is valid.
    </div>
  </form>
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {ValidatorService} from 'angular-iban';

export class AppComponent implements OnInit {

  public reactiveForm: FormGroup;

  public ibanReactive: FormControl;

  constructor(private fb: FormBuilder
  ) {}

  public ngOnInit(): void {
    this.ibanReactive = new FormControl(
      null,
        [
          Validators.required,
          ValidatorService.validateIban
        ]
    );

    this.reactiveForm = this.fb.group({
      ibanReactive: this.ibanReactive,
    });
  }
}

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 fundsaccess AG. Licensed under the MIT License (MIT)

Keywords

FAQs

Package last updated on 22 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc