ngx-iban-validator 1.1.8 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +249 -75
- package/dist/README.md +249 -75
- package/dist/code-lengths.js +1 -0
- package/dist/iban.validator.spec.js +3 -0
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
# IBAN Validator
|
|
2
2
|
|
|
3
|
-
IBAN Validator for your
|
|
3
|
+
IBAN Validator for your web application forms ([Angular](#angular), [React](#react), Vue, ...), comes without any dependencies and can be used as a standalone function in any JS project. It can perform format, digit and length IBAN validations. Currently [108 countries](#supported-countries) are supported.
|
|
4
|
+
|
|
5
|
+
## Content
|
|
6
|
+
|
|
7
|
+
- [Install](#install)
|
|
8
|
+
- [Use as a standalone function](#use-as-a-standalone-function)
|
|
9
|
+
- [Error Response](#error-response)
|
|
10
|
+
- [Use as a form validator](#use-as-a-form-validator)
|
|
11
|
+
- [Angular example](#angular)
|
|
12
|
+
- [React example](#react)
|
|
13
|
+
- [Demo Applications](#demo)
|
|
14
|
+
- [Supported countries](#supported-countries)
|
|
15
|
+
- [Development](#development)
|
|
16
|
+
- [Install dependencies](#install-dependencies)
|
|
17
|
+
- [Test](#test)
|
|
18
|
+
- [Build](#build)
|
|
19
|
+
- [Changelog](#changelog)
|
|
20
|
+
- [Read more](#read-more)
|
|
4
21
|
|
|
5
22
|
## Install
|
|
6
23
|
|
|
@@ -8,35 +25,41 @@ IBAN Validator for your reactive Angular forms, comes without any dependencies a
|
|
|
8
25
|
npm install ngx-iban-validator --save
|
|
9
26
|
```
|
|
10
27
|
|
|
11
|
-
## Use as a
|
|
28
|
+
## Use as a standalone function
|
|
12
29
|
|
|
13
|
-
|
|
30
|
+
You can use validateIBAN function independently from any forms.
|
|
31
|
+
|
|
32
|
+
Value can be passed as part of object in this case validation flow will be the same as for form validation:
|
|
33
|
+
|
|
34
|
+
- If IBAN is valid as result of validation **null** is returned.
|
|
35
|
+
|
|
36
|
+
- If IBAN is invalid and some of the checks fail IBANValidationResult object is returned containing more info about error.
|
|
14
37
|
|
|
15
38
|
```typescript
|
|
16
|
-
|
|
17
|
-
|
|
39
|
+
const ibanIsInvalid =
|
|
40
|
+
validateIBAN({
|
|
41
|
+
value: "AL35202111090000000001234567",
|
|
42
|
+
}) !== null;
|
|
43
|
+
```
|
|
18
44
|
|
|
19
|
-
|
|
45
|
+
Value can be passed as a string:
|
|
20
46
|
|
|
21
|
-
|
|
22
|
-
selector: "app-root",
|
|
23
|
-
templateUrl: "./app.component.html",
|
|
24
|
-
styleUrls: ["./app.component.scss"],
|
|
25
|
-
})
|
|
26
|
-
export class AppComponent implements OnInit {
|
|
27
|
-
ibanForm: FormGroup;
|
|
47
|
+
- For valid and invalid IBAN IBANValidationResult object is returned
|
|
28
48
|
|
|
29
|
-
|
|
49
|
+
```bash
|
|
50
|
+
const ibanIsInvalid = validateIBAN("AL35202111090000000001234567").ibanInvalid;
|
|
51
|
+
```
|
|
30
52
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
53
|
+
### NodeJS
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
const ibanValidator = require("ngx-iban-validator");
|
|
57
|
+
const ibanIsInvalid = ibanValidator.validateIBAN(
|
|
58
|
+
"BA393385804800211234"
|
|
59
|
+
).ibanInvalid;
|
|
37
60
|
```
|
|
38
61
|
|
|
39
|
-
##
|
|
62
|
+
## Error Response
|
|
40
63
|
|
|
41
64
|
- If IBAN is valid as result of validation **null** is returned.
|
|
42
65
|
|
|
@@ -57,70 +80,206 @@ export interface IBANError {
|
|
|
57
80
|
|
|
58
81
|
Error object contains more details about validation error. You can display errors easily as with any other validator.
|
|
59
82
|
|
|
60
|
-
|
|
61
|
-
<form [formGroup]="ibanForm">
|
|
62
|
-
<input type="text" formControlName="iban" />
|
|
63
|
-
<small
|
|
64
|
-
*ngIf="
|
|
65
|
-
ibanForm.get('iban')?.errors && ibanForm.get('iban')?.errors?.['ibanInvalid']
|
|
66
|
-
"
|
|
67
|
-
>
|
|
68
|
-
<span *ngIf="ibanForm.get('iban')?.errors?.['error']['countryUnsupported']">
|
|
69
|
-
Country not supported
|
|
70
|
-
</span>
|
|
71
|
-
<span *ngIf="ibanForm.get('iban')?.errors?.['error']['codeLengthInvalid']">
|
|
72
|
-
IBAN Code length is invalid
|
|
73
|
-
</span>
|
|
74
|
-
<span *ngIf="ibanForm.get('iban')?.errors?.['error']['patternInvalid']">
|
|
75
|
-
IBAN Code pattern is invalid
|
|
76
|
-
</span>
|
|
77
|
-
</small>
|
|
78
|
-
<button [disabled]="ibanForm.invalid">Submit</button>
|
|
79
|
-
</form>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
## Demo
|
|
83
|
+
## Use as a form validator
|
|
83
84
|
|
|
84
|
-
|
|
85
|
+
### Angular
|
|
85
86
|
|
|
86
|
-
|
|
87
|
+
Import validateIBAN function from ngx-iban-validator package into your component file. Add validateIBAN to your form validators array.
|
|
87
88
|
|
|
88
|
-
|
|
89
|
+
```ts
|
|
90
|
+
import { Component, inject } from "@angular/core";
|
|
91
|
+
import { NgIf } from "@angular/common";
|
|
92
|
+
import {
|
|
93
|
+
FormBuilder,
|
|
94
|
+
FormGroup,
|
|
95
|
+
ReactiveFormsModule,
|
|
96
|
+
Validators,
|
|
97
|
+
} from "@angular/forms";
|
|
89
98
|
|
|
90
|
-
|
|
99
|
+
import { validateIBAN } from "ngx-iban-validator";
|
|
91
100
|
|
|
92
|
-
|
|
101
|
+
@Component({
|
|
102
|
+
selector: "my-app",
|
|
103
|
+
standalone: true,
|
|
104
|
+
imports: [NgIf, ReactiveFormsModule],
|
|
105
|
+
template: `
|
|
106
|
+
<div class="page">
|
|
107
|
+
<form [formGroup]="ibanForm" (ngSubmit)="submit(ibanForm)">
|
|
108
|
+
<h2>NGX IBAN Validator</h2>
|
|
109
|
+
<div>
|
|
110
|
+
<input type="text" formControlName="iban" placeholder="Enter IBAN" />
|
|
111
|
+
<button [disabled]="ibanForm.invalid">Submit</button>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="validation-errors">
|
|
114
|
+
<small
|
|
115
|
+
*ngIf="
|
|
116
|
+
ibanForm.get('iban')?.errors && ibanForm.get('iban')?.errors?.['ibanInvalid']
|
|
117
|
+
"
|
|
118
|
+
>
|
|
119
|
+
<span
|
|
120
|
+
*ngIf="ibanForm.get('iban')?.errors?.['error']['countryUnsupported']"
|
|
121
|
+
>
|
|
122
|
+
Country not supported
|
|
123
|
+
</span>
|
|
124
|
+
<span
|
|
125
|
+
*ngIf="ibanForm.get('iban')?.errors?.['error']['codeLengthInvalid']"
|
|
126
|
+
>
|
|
127
|
+
IBAN Code length is invalid
|
|
128
|
+
</span>
|
|
129
|
+
<span
|
|
130
|
+
*ngIf="ibanForm.get('iban')?.errors?.['error']['patternInvalid']"
|
|
131
|
+
>
|
|
132
|
+
IBAN Code pattern is invalid
|
|
133
|
+
</span>
|
|
134
|
+
</small>
|
|
135
|
+
</div>
|
|
136
|
+
</form>
|
|
137
|
+
</div>
|
|
138
|
+
`,
|
|
139
|
+
styles: [
|
|
140
|
+
`
|
|
141
|
+
.page {
|
|
142
|
+
height: 100vh;
|
|
143
|
+
display: flex;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
align-items: center;
|
|
146
|
+
}
|
|
147
|
+
h2 {
|
|
148
|
+
text-align: center;
|
|
149
|
+
}
|
|
150
|
+
form {
|
|
151
|
+
padding: 20px;
|
|
152
|
+
}
|
|
153
|
+
input {
|
|
154
|
+
padding: 10px;
|
|
155
|
+
}
|
|
156
|
+
button {
|
|
157
|
+
padding: 10px;
|
|
158
|
+
}
|
|
159
|
+
.validation-errors {
|
|
160
|
+
color: red;
|
|
161
|
+
}
|
|
162
|
+
`,
|
|
163
|
+
],
|
|
164
|
+
})
|
|
165
|
+
export class App {
|
|
166
|
+
formBuilder = inject(FormBuilder);
|
|
167
|
+
ibanForm = this.formBuilder.group({
|
|
168
|
+
iban: [null, [Validators.required, validateIBAN]],
|
|
169
|
+
});
|
|
170
|
+
submit(form: FormGroup) {
|
|
171
|
+
const { valid, value } = form;
|
|
172
|
+
const { iban } = value;
|
|
173
|
+
if (valid) {
|
|
174
|
+
alert(`IBAN: ${iban}, is valid!`);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
```
|
|
93
179
|
|
|
94
|
-
|
|
180
|
+
### React
|
|
95
181
|
|
|
96
|
-
|
|
182
|
+
```tsx
|
|
183
|
+
import { useState } from "react";
|
|
184
|
+
import {
|
|
185
|
+
IBANError,
|
|
186
|
+
IBANValidationResult,
|
|
187
|
+
validateIBAN,
|
|
188
|
+
} from "ngx-iban-validator/dist/iban.validator";
|
|
97
189
|
|
|
98
|
-
|
|
99
|
-
const ibanIsInvalid =
|
|
100
|
-
validateIBAN({
|
|
101
|
-
value: "AL35202111090000000001234567",
|
|
102
|
-
}) !== null;
|
|
103
|
-
```
|
|
190
|
+
import "./App.css";
|
|
104
191
|
|
|
105
|
-
|
|
192
|
+
function App() {
|
|
193
|
+
const [error, setError] = useState<IBANError | null>(null);
|
|
106
194
|
|
|
107
|
-
|
|
195
|
+
const validate = (iban: string): boolean => {
|
|
196
|
+
const validation = validateIBAN({
|
|
197
|
+
value: iban,
|
|
198
|
+
});
|
|
199
|
+
if (validation) {
|
|
200
|
+
const { ibanInvalid, error }: IBANValidationResult = validation;
|
|
201
|
+
if (ibanInvalid) {
|
|
202
|
+
setError(error);
|
|
203
|
+
return false;
|
|
204
|
+
} else {
|
|
205
|
+
setError(null);
|
|
206
|
+
return true;
|
|
207
|
+
}
|
|
208
|
+
} else {
|
|
209
|
+
setError(null);
|
|
210
|
+
return true;
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
215
|
+
event.preventDefault();
|
|
216
|
+
const formData = new FormData(event.currentTarget);
|
|
217
|
+
const iban = formData.get("iban") as string;
|
|
218
|
+
const validation = validate(iban);
|
|
219
|
+
if (validation) {
|
|
220
|
+
alert("IBAN is valid");
|
|
221
|
+
} else {
|
|
222
|
+
alert("IBAN is not valid");
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
const handleIbanChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
227
|
+
const { value } = event.target;
|
|
228
|
+
validate(value);
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
return (
|
|
232
|
+
<div className="page">
|
|
233
|
+
<form onSubmit={handleSubmit}>
|
|
234
|
+
<h2>NGX IBAN Validator</h2>
|
|
235
|
+
<div>
|
|
236
|
+
<input
|
|
237
|
+
type="text"
|
|
238
|
+
name="iban"
|
|
239
|
+
placeholder="Enter IBAN"
|
|
240
|
+
onChange={handleIbanChanged}
|
|
241
|
+
/>
|
|
242
|
+
<button>Submit</button>
|
|
243
|
+
</div>
|
|
244
|
+
<div className="validation-errors">
|
|
245
|
+
<small hidden={!error}>
|
|
246
|
+
<span hidden={!error?.countryUnsupported}>
|
|
247
|
+
Country not supported
|
|
248
|
+
</span>
|
|
249
|
+
<span hidden={!error?.codeLengthInvalid}>
|
|
250
|
+
IBAN Code length is invalid
|
|
251
|
+
</span>
|
|
252
|
+
<span hidden={!error?.patternInvalid}>
|
|
253
|
+
IBAN Code pattern is invalid
|
|
254
|
+
</span>
|
|
255
|
+
</small>
|
|
256
|
+
</div>
|
|
257
|
+
</form>
|
|
258
|
+
</div>
|
|
259
|
+
);
|
|
260
|
+
}
|
|
108
261
|
|
|
109
|
-
|
|
110
|
-
const ibanIsInvalid = validateIBAN("AL35202111090000000001234567").ibanInvalid;
|
|
262
|
+
export default App;
|
|
111
263
|
```
|
|
112
264
|
|
|
113
|
-
|
|
265
|
+
## Demo
|
|
114
266
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
267
|
+
Check demo applications for usage examples:
|
|
268
|
+
|
|
269
|
+
- [Angular - Demo Application](https://stackblitz.com/edit/stackblitz-starters-d6zn46?file=src%2Fmain.ts)
|
|
270
|
+
- [React - Demo Application](https://stackblitz.com/edit/vitejs-vite-mhe5gj?file=src%2FApp.tsx)
|
|
271
|
+
|
|
272
|
+
###
|
|
121
273
|
|
|
122
274
|
# Supported countries
|
|
123
275
|
|
|
276
|
+
####
|
|
277
|
+
|
|
278
|
+
<details>
|
|
279
|
+
<summary>
|
|
280
|
+
Click here to expand list of supported countries
|
|
281
|
+
</summary>
|
|
282
|
+
|
|
124
283
|
| Country | Country Code | Length |
|
|
125
284
|
| ------------------------ | ------------ | ------ |
|
|
126
285
|
| Albania | AL | 28 |
|
|
@@ -222,6 +381,7 @@ const ibanIsInvalid = ibanValidator.validateIBAN(
|
|
|
222
381
|
| Somalia | SO | 23 |
|
|
223
382
|
| Spain | ES | 24 |
|
|
224
383
|
| Sudan | SD | 18 |
|
|
384
|
+
| Sultanate of Oman | OM | 23 |
|
|
225
385
|
| Sweden | SE | 24 |
|
|
226
386
|
| Switzerland | CH | 21 |
|
|
227
387
|
| Timor-Leste | TL | 23 |
|
|
@@ -233,6 +393,10 @@ const ibanIsInvalid = ibanValidator.validateIBAN(
|
|
|
233
393
|
| United Kingdom | GB | 22 |
|
|
234
394
|
| Virgin Islands, British | VG | 24 |
|
|
235
395
|
|
|
396
|
+
</details>
|
|
397
|
+
|
|
398
|
+
###
|
|
399
|
+
|
|
236
400
|
# Development
|
|
237
401
|
|
|
238
402
|
## Install dependencies
|
|
@@ -253,15 +417,25 @@ npm run test
|
|
|
253
417
|
npx tsc
|
|
254
418
|
```
|
|
255
419
|
|
|
256
|
-
#
|
|
420
|
+
# Changelog
|
|
421
|
+
|
|
422
|
+
## v 1.2.0
|
|
423
|
+
|
|
424
|
+
- Updated documentation
|
|
425
|
+
|
|
426
|
+
## v 1.1.9
|
|
427
|
+
|
|
428
|
+
- Added support for Sultanate of Oman
|
|
429
|
+
|
|
430
|
+
## v 1.1.8
|
|
257
431
|
|
|
258
432
|
- Added support for Falkland Islands
|
|
259
433
|
|
|
260
|
-
|
|
434
|
+
## v 1.1.7
|
|
261
435
|
|
|
262
436
|
- Added support for Djibouti and Somalia
|
|
263
437
|
|
|
264
|
-
|
|
438
|
+
## v 1.1.6
|
|
265
439
|
|
|
266
440
|
- Updated error display logic
|
|
267
441
|
- Value can be passed directly as a string or part of the object.
|
|
@@ -273,19 +447,19 @@ npx tsc
|
|
|
273
447
|
- Return null for valid form field to fix issue with disabling | enabling buttons
|
|
274
448
|
- Thnx to @pramodEE for reporting the issue
|
|
275
449
|
|
|
276
|
-
|
|
450
|
+
## v 1.1.5
|
|
277
451
|
|
|
278
452
|
Added additional pattern validation
|
|
279
453
|
Added more tests to improve test coverage
|
|
280
454
|
Added support for new countries: Algeria, Angola, Benin, Burkina Faso, Burundi, Cameroon, Cape Verde, Central African Republic, Chad, Comoros, Congo, Equatorial Guinea, Gabon, Guinea-Bissau, Honduras, Iran, Ivory Coast, Madagascar, Mali, Mongolia, Morocco, Mozambique, Nicaragua, Niger, Russia, Senegal, Togo
|
|
281
455
|
|
|
282
|
-
|
|
456
|
+
## v 1.1.4
|
|
283
457
|
|
|
284
458
|
Avoid Angular warnings for old CommonJS module usage (see https://angular.io/guide/build#configuring-commonjs-dependencies)
|
|
285
459
|
|
|
286
460
|
Replaced mocha and chai with JEST for tests
|
|
287
461
|
|
|
288
|
-
|
|
462
|
+
## v 1.1.3
|
|
289
463
|
|
|
290
464
|
Added support for new countries: Vatican, Libya, Sao Tome and Principe, Sudan
|
|
291
465
|
Updated length for LC Saint Lucia from 30 to 32
|
|
@@ -293,7 +467,7 @@ Updated length for LC Saint Lucia from 30 to 32
|
|
|
293
467
|
Added Tests
|
|
294
468
|
Added Mocha and Chai for testing
|
|
295
469
|
|
|
296
|
-
|
|
470
|
+
## v 1.1.2
|
|
297
471
|
|
|
298
472
|
Updated length for CR to 22 - @freddy36
|
|
299
473
|
|
package/dist/README.md
CHANGED
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
# IBAN Validator
|
|
2
2
|
|
|
3
|
-
IBAN Validator for your
|
|
3
|
+
IBAN Validator for your web application forms ([Angular](#angular), [React](#react), Vue, ...), comes without any dependencies and can be used as a standalone function in any JS project. It can perform format, digit and length IBAN validations. Currently [108 countries](#supported-countries) are supported.
|
|
4
|
+
|
|
5
|
+
## Content
|
|
6
|
+
|
|
7
|
+
- [Install](#install)
|
|
8
|
+
- [Use as a standalone function](#use-as-a-standalone-function)
|
|
9
|
+
- [Error Response](#error-response)
|
|
10
|
+
- [Use as a form validator](#use-as-a-form-validator)
|
|
11
|
+
- [Angular example](#angular)
|
|
12
|
+
- [React example](#react)
|
|
13
|
+
- [Demo Applications](#demo)
|
|
14
|
+
- [Supported countries](#supported-countries)
|
|
15
|
+
- [Development](#development)
|
|
16
|
+
- [Install dependencies](#install-dependencies)
|
|
17
|
+
- [Test](#test)
|
|
18
|
+
- [Build](#build)
|
|
19
|
+
- [Changelog](#changelog)
|
|
20
|
+
- [Read more](#read-more)
|
|
4
21
|
|
|
5
22
|
## Install
|
|
6
23
|
|
|
@@ -8,35 +25,41 @@ IBAN Validator for your reactive Angular forms, comes without any dependencies a
|
|
|
8
25
|
npm install ngx-iban-validator --save
|
|
9
26
|
```
|
|
10
27
|
|
|
11
|
-
## Use as a
|
|
28
|
+
## Use as a standalone function
|
|
12
29
|
|
|
13
|
-
|
|
30
|
+
You can use validateIBAN function independently from any forms.
|
|
31
|
+
|
|
32
|
+
Value can be passed as part of object in this case validation flow will be the same as for form validation:
|
|
33
|
+
|
|
34
|
+
- If IBAN is valid as result of validation **null** is returned.
|
|
35
|
+
|
|
36
|
+
- If IBAN is invalid and some of the checks fail IBANValidationResult object is returned containing more info about error.
|
|
14
37
|
|
|
15
38
|
```typescript
|
|
16
|
-
|
|
17
|
-
|
|
39
|
+
const ibanIsInvalid =
|
|
40
|
+
validateIBAN({
|
|
41
|
+
value: "AL35202111090000000001234567",
|
|
42
|
+
}) !== null;
|
|
43
|
+
```
|
|
18
44
|
|
|
19
|
-
|
|
45
|
+
Value can be passed as a string:
|
|
20
46
|
|
|
21
|
-
|
|
22
|
-
selector: "app-root",
|
|
23
|
-
templateUrl: "./app.component.html",
|
|
24
|
-
styleUrls: ["./app.component.scss"],
|
|
25
|
-
})
|
|
26
|
-
export class AppComponent implements OnInit {
|
|
27
|
-
ibanForm: FormGroup;
|
|
47
|
+
- For valid and invalid IBAN IBANValidationResult object is returned
|
|
28
48
|
|
|
29
|
-
|
|
49
|
+
```bash
|
|
50
|
+
const ibanIsInvalid = validateIBAN("AL35202111090000000001234567").ibanInvalid;
|
|
51
|
+
```
|
|
30
52
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
53
|
+
### NodeJS
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
const ibanValidator = require("ngx-iban-validator");
|
|
57
|
+
const ibanIsInvalid = ibanValidator.validateIBAN(
|
|
58
|
+
"BA393385804800211234"
|
|
59
|
+
).ibanInvalid;
|
|
37
60
|
```
|
|
38
61
|
|
|
39
|
-
##
|
|
62
|
+
## Error Response
|
|
40
63
|
|
|
41
64
|
- If IBAN is valid as result of validation **null** is returned.
|
|
42
65
|
|
|
@@ -57,70 +80,206 @@ export interface IBANError {
|
|
|
57
80
|
|
|
58
81
|
Error object contains more details about validation error. You can display errors easily as with any other validator.
|
|
59
82
|
|
|
60
|
-
|
|
61
|
-
<form [formGroup]="ibanForm">
|
|
62
|
-
<input type="text" formControlName="iban" />
|
|
63
|
-
<small
|
|
64
|
-
*ngIf="
|
|
65
|
-
ibanForm.get('iban')?.errors && ibanForm.get('iban')?.errors?.['ibanInvalid']
|
|
66
|
-
"
|
|
67
|
-
>
|
|
68
|
-
<span *ngIf="ibanForm.get('iban')?.errors?.['error']['countryUnsupported']">
|
|
69
|
-
Country not supported
|
|
70
|
-
</span>
|
|
71
|
-
<span *ngIf="ibanForm.get('iban')?.errors?.['error']['codeLengthInvalid']">
|
|
72
|
-
IBAN Code length is invalid
|
|
73
|
-
</span>
|
|
74
|
-
<span *ngIf="ibanForm.get('iban')?.errors?.['error']['patternInvalid']">
|
|
75
|
-
IBAN Code pattern is invalid
|
|
76
|
-
</span>
|
|
77
|
-
</small>
|
|
78
|
-
<button [disabled]="ibanForm.invalid">Submit</button>
|
|
79
|
-
</form>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
## Demo
|
|
83
|
+
## Use as a form validator
|
|
83
84
|
|
|
84
|
-
|
|
85
|
+
### Angular
|
|
85
86
|
|
|
86
|
-
|
|
87
|
+
Import validateIBAN function from ngx-iban-validator package into your component file. Add validateIBAN to your form validators array.
|
|
87
88
|
|
|
88
|
-
|
|
89
|
+
```ts
|
|
90
|
+
import { Component, inject } from "@angular/core";
|
|
91
|
+
import { NgIf } from "@angular/common";
|
|
92
|
+
import {
|
|
93
|
+
FormBuilder,
|
|
94
|
+
FormGroup,
|
|
95
|
+
ReactiveFormsModule,
|
|
96
|
+
Validators,
|
|
97
|
+
} from "@angular/forms";
|
|
89
98
|
|
|
90
|
-
|
|
99
|
+
import { validateIBAN } from "ngx-iban-validator";
|
|
91
100
|
|
|
92
|
-
|
|
101
|
+
@Component({
|
|
102
|
+
selector: "my-app",
|
|
103
|
+
standalone: true,
|
|
104
|
+
imports: [NgIf, ReactiveFormsModule],
|
|
105
|
+
template: `
|
|
106
|
+
<div class="page">
|
|
107
|
+
<form [formGroup]="ibanForm" (ngSubmit)="submit(ibanForm)">
|
|
108
|
+
<h2>NGX IBAN Validator</h2>
|
|
109
|
+
<div>
|
|
110
|
+
<input type="text" formControlName="iban" placeholder="Enter IBAN" />
|
|
111
|
+
<button [disabled]="ibanForm.invalid">Submit</button>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="validation-errors">
|
|
114
|
+
<small
|
|
115
|
+
*ngIf="
|
|
116
|
+
ibanForm.get('iban')?.errors && ibanForm.get('iban')?.errors?.['ibanInvalid']
|
|
117
|
+
"
|
|
118
|
+
>
|
|
119
|
+
<span
|
|
120
|
+
*ngIf="ibanForm.get('iban')?.errors?.['error']['countryUnsupported']"
|
|
121
|
+
>
|
|
122
|
+
Country not supported
|
|
123
|
+
</span>
|
|
124
|
+
<span
|
|
125
|
+
*ngIf="ibanForm.get('iban')?.errors?.['error']['codeLengthInvalid']"
|
|
126
|
+
>
|
|
127
|
+
IBAN Code length is invalid
|
|
128
|
+
</span>
|
|
129
|
+
<span
|
|
130
|
+
*ngIf="ibanForm.get('iban')?.errors?.['error']['patternInvalid']"
|
|
131
|
+
>
|
|
132
|
+
IBAN Code pattern is invalid
|
|
133
|
+
</span>
|
|
134
|
+
</small>
|
|
135
|
+
</div>
|
|
136
|
+
</form>
|
|
137
|
+
</div>
|
|
138
|
+
`,
|
|
139
|
+
styles: [
|
|
140
|
+
`
|
|
141
|
+
.page {
|
|
142
|
+
height: 100vh;
|
|
143
|
+
display: flex;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
align-items: center;
|
|
146
|
+
}
|
|
147
|
+
h2 {
|
|
148
|
+
text-align: center;
|
|
149
|
+
}
|
|
150
|
+
form {
|
|
151
|
+
padding: 20px;
|
|
152
|
+
}
|
|
153
|
+
input {
|
|
154
|
+
padding: 10px;
|
|
155
|
+
}
|
|
156
|
+
button {
|
|
157
|
+
padding: 10px;
|
|
158
|
+
}
|
|
159
|
+
.validation-errors {
|
|
160
|
+
color: red;
|
|
161
|
+
}
|
|
162
|
+
`,
|
|
163
|
+
],
|
|
164
|
+
})
|
|
165
|
+
export class App {
|
|
166
|
+
formBuilder = inject(FormBuilder);
|
|
167
|
+
ibanForm = this.formBuilder.group({
|
|
168
|
+
iban: [null, [Validators.required, validateIBAN]],
|
|
169
|
+
});
|
|
170
|
+
submit(form: FormGroup) {
|
|
171
|
+
const { valid, value } = form;
|
|
172
|
+
const { iban } = value;
|
|
173
|
+
if (valid) {
|
|
174
|
+
alert(`IBAN: ${iban}, is valid!`);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
```
|
|
93
179
|
|
|
94
|
-
|
|
180
|
+
### React
|
|
95
181
|
|
|
96
|
-
|
|
182
|
+
```tsx
|
|
183
|
+
import { useState } from "react";
|
|
184
|
+
import {
|
|
185
|
+
IBANError,
|
|
186
|
+
IBANValidationResult,
|
|
187
|
+
validateIBAN,
|
|
188
|
+
} from "ngx-iban-validator/dist/iban.validator";
|
|
97
189
|
|
|
98
|
-
|
|
99
|
-
const ibanIsInvalid =
|
|
100
|
-
validateIBAN({
|
|
101
|
-
value: "AL35202111090000000001234567",
|
|
102
|
-
}) !== null;
|
|
103
|
-
```
|
|
190
|
+
import "./App.css";
|
|
104
191
|
|
|
105
|
-
|
|
192
|
+
function App() {
|
|
193
|
+
const [error, setError] = useState<IBANError | null>(null);
|
|
106
194
|
|
|
107
|
-
|
|
195
|
+
const validate = (iban: string): boolean => {
|
|
196
|
+
const validation = validateIBAN({
|
|
197
|
+
value: iban,
|
|
198
|
+
});
|
|
199
|
+
if (validation) {
|
|
200
|
+
const { ibanInvalid, error }: IBANValidationResult = validation;
|
|
201
|
+
if (ibanInvalid) {
|
|
202
|
+
setError(error);
|
|
203
|
+
return false;
|
|
204
|
+
} else {
|
|
205
|
+
setError(null);
|
|
206
|
+
return true;
|
|
207
|
+
}
|
|
208
|
+
} else {
|
|
209
|
+
setError(null);
|
|
210
|
+
return true;
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
215
|
+
event.preventDefault();
|
|
216
|
+
const formData = new FormData(event.currentTarget);
|
|
217
|
+
const iban = formData.get("iban") as string;
|
|
218
|
+
const validation = validate(iban);
|
|
219
|
+
if (validation) {
|
|
220
|
+
alert("IBAN is valid");
|
|
221
|
+
} else {
|
|
222
|
+
alert("IBAN is not valid");
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
const handleIbanChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
227
|
+
const { value } = event.target;
|
|
228
|
+
validate(value);
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
return (
|
|
232
|
+
<div className="page">
|
|
233
|
+
<form onSubmit={handleSubmit}>
|
|
234
|
+
<h2>NGX IBAN Validator</h2>
|
|
235
|
+
<div>
|
|
236
|
+
<input
|
|
237
|
+
type="text"
|
|
238
|
+
name="iban"
|
|
239
|
+
placeholder="Enter IBAN"
|
|
240
|
+
onChange={handleIbanChanged}
|
|
241
|
+
/>
|
|
242
|
+
<button>Submit</button>
|
|
243
|
+
</div>
|
|
244
|
+
<div className="validation-errors">
|
|
245
|
+
<small hidden={!error}>
|
|
246
|
+
<span hidden={!error?.countryUnsupported}>
|
|
247
|
+
Country not supported
|
|
248
|
+
</span>
|
|
249
|
+
<span hidden={!error?.codeLengthInvalid}>
|
|
250
|
+
IBAN Code length is invalid
|
|
251
|
+
</span>
|
|
252
|
+
<span hidden={!error?.patternInvalid}>
|
|
253
|
+
IBAN Code pattern is invalid
|
|
254
|
+
</span>
|
|
255
|
+
</small>
|
|
256
|
+
</div>
|
|
257
|
+
</form>
|
|
258
|
+
</div>
|
|
259
|
+
);
|
|
260
|
+
}
|
|
108
261
|
|
|
109
|
-
|
|
110
|
-
const ibanIsInvalid = validateIBAN("AL35202111090000000001234567").ibanInvalid;
|
|
262
|
+
export default App;
|
|
111
263
|
```
|
|
112
264
|
|
|
113
|
-
|
|
265
|
+
## Demo
|
|
114
266
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
267
|
+
Check demo applications for usage examples:
|
|
268
|
+
|
|
269
|
+
- [Angular - Demo Application](https://stackblitz.com/edit/stackblitz-starters-d6zn46?file=src%2Fmain.ts)
|
|
270
|
+
- [React - Demo Application](https://stackblitz.com/edit/vitejs-vite-mhe5gj?file=src%2FApp.tsx)
|
|
271
|
+
|
|
272
|
+
###
|
|
121
273
|
|
|
122
274
|
# Supported countries
|
|
123
275
|
|
|
276
|
+
####
|
|
277
|
+
|
|
278
|
+
<details>
|
|
279
|
+
<summary>
|
|
280
|
+
Click here to expand list of supported countries
|
|
281
|
+
</summary>
|
|
282
|
+
|
|
124
283
|
| Country | Country Code | Length |
|
|
125
284
|
| ------------------------ | ------------ | ------ |
|
|
126
285
|
| Albania | AL | 28 |
|
|
@@ -222,6 +381,7 @@ const ibanIsInvalid = ibanValidator.validateIBAN(
|
|
|
222
381
|
| Somalia | SO | 23 |
|
|
223
382
|
| Spain | ES | 24 |
|
|
224
383
|
| Sudan | SD | 18 |
|
|
384
|
+
| Sultanate of Oman | OM | 23 |
|
|
225
385
|
| Sweden | SE | 24 |
|
|
226
386
|
| Switzerland | CH | 21 |
|
|
227
387
|
| Timor-Leste | TL | 23 |
|
|
@@ -233,6 +393,10 @@ const ibanIsInvalid = ibanValidator.validateIBAN(
|
|
|
233
393
|
| United Kingdom | GB | 22 |
|
|
234
394
|
| Virgin Islands, British | VG | 24 |
|
|
235
395
|
|
|
396
|
+
</details>
|
|
397
|
+
|
|
398
|
+
###
|
|
399
|
+
|
|
236
400
|
# Development
|
|
237
401
|
|
|
238
402
|
## Install dependencies
|
|
@@ -253,15 +417,25 @@ npm run test
|
|
|
253
417
|
npx tsc
|
|
254
418
|
```
|
|
255
419
|
|
|
256
|
-
#
|
|
420
|
+
# Changelog
|
|
421
|
+
|
|
422
|
+
## v 1.2.0
|
|
423
|
+
|
|
424
|
+
- Updated documentation
|
|
425
|
+
|
|
426
|
+
## v 1.1.9
|
|
427
|
+
|
|
428
|
+
- Added support for Sultanate of Oman
|
|
429
|
+
|
|
430
|
+
## v 1.1.8
|
|
257
431
|
|
|
258
432
|
- Added support for Falkland Islands
|
|
259
433
|
|
|
260
|
-
|
|
434
|
+
## v 1.1.7
|
|
261
435
|
|
|
262
436
|
- Added support for Djibouti and Somalia
|
|
263
437
|
|
|
264
|
-
|
|
438
|
+
## v 1.1.6
|
|
265
439
|
|
|
266
440
|
- Updated error display logic
|
|
267
441
|
- Value can be passed directly as a string or part of the object.
|
|
@@ -273,19 +447,19 @@ npx tsc
|
|
|
273
447
|
- Return null for valid form field to fix issue with disabling | enabling buttons
|
|
274
448
|
- Thnx to @pramodEE for reporting the issue
|
|
275
449
|
|
|
276
|
-
|
|
450
|
+
## v 1.1.5
|
|
277
451
|
|
|
278
452
|
Added additional pattern validation
|
|
279
453
|
Added more tests to improve test coverage
|
|
280
454
|
Added support for new countries: Algeria, Angola, Benin, Burkina Faso, Burundi, Cameroon, Cape Verde, Central African Republic, Chad, Comoros, Congo, Equatorial Guinea, Gabon, Guinea-Bissau, Honduras, Iran, Ivory Coast, Madagascar, Mali, Mongolia, Morocco, Mozambique, Nicaragua, Niger, Russia, Senegal, Togo
|
|
281
455
|
|
|
282
|
-
|
|
456
|
+
## v 1.1.4
|
|
283
457
|
|
|
284
458
|
Avoid Angular warnings for old CommonJS module usage (see https://angular.io/guide/build#configuring-commonjs-dependencies)
|
|
285
459
|
|
|
286
460
|
Replaced mocha and chai with JEST for tests
|
|
287
461
|
|
|
288
|
-
|
|
462
|
+
## v 1.1.3
|
|
289
463
|
|
|
290
464
|
Added support for new countries: Vatican, Libya, Sao Tome and Principe, Sudan
|
|
291
465
|
Updated length for LC Saint Lucia from 30 to 32
|
|
@@ -293,7 +467,7 @@ Updated length for LC Saint Lucia from 30 to 32
|
|
|
293
467
|
Added Tests
|
|
294
468
|
Added Mocha and Chai for testing
|
|
295
469
|
|
|
296
|
-
|
|
470
|
+
## v 1.1.2
|
|
297
471
|
|
|
298
472
|
Updated length for CR to 22 - @freddy36
|
|
299
473
|
|
package/dist/code-lengths.js
CHANGED
|
@@ -337,6 +337,9 @@ describe("validateIBAN", () => {
|
|
|
337
337
|
it("validateIBAN for Sudan SD8811123456789012 should return null", () => {
|
|
338
338
|
expect(validateIBAN({ value: "SD8811123456789012" })).toBe(null);
|
|
339
339
|
});
|
|
340
|
+
it("validateIBAN for Sultanate of Oman OM040280000012345678901 should return null", () => {
|
|
341
|
+
expect(validateIBAN({ value: "OM040280000012345678901" })).toBe(null);
|
|
342
|
+
});
|
|
340
343
|
it("validateIBAN for Sweden SE7280000810340009783242 should return null", () => {
|
|
341
344
|
expect(validateIBAN({ value: "SE7280000810340009783242" })).toBe(null);
|
|
342
345
|
});
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-iban-validator",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
|
-
"url": "https://github.com/SKaDiZZ/ngx-iban-validator"
|
|
6
|
+
"url": "git+https://github.com/SKaDiZZ/ngx-iban-validator.git"
|
|
7
7
|
},
|
|
8
8
|
"bugs": {
|
|
9
9
|
"url": "https://github.com/SKaDiZZ/ngx-iban-validator/issues"
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"email": "akirapowered@gmail.com",
|
|
14
14
|
"url": "https://samirkahvedzic.info"
|
|
15
15
|
},
|
|
16
|
-
"description": "IBAN Validator for your
|
|
16
|
+
"description": "IBAN Validator for your web application forms (Angular, React, Vue, ...), comes without any dependencies and can be used as a standalone function in any JS project. It can perform format, digit and length IBAN validations. Currently 108 countries are supported.",
|
|
17
17
|
"main": "dist/index.js",
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "tsc",
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
"validator",
|
|
27
27
|
"iban-validator",
|
|
28
28
|
"angular",
|
|
29
|
+
"angularjs",
|
|
30
|
+
"react",
|
|
31
|
+
"vue",
|
|
32
|
+
"vuejs",
|
|
29
33
|
"forms",
|
|
30
34
|
"input"
|
|
31
35
|
],
|