feat: added iban validator

projects/design-angular-kit/assets/i18n/en.json

@@ -7,8 +7,10 @@
       "close": "Close",
       "continue": "Continue",
       "edit": "Edit",
+      "show": "Show",
       "show-all": "Show all",
-      "details": "Details"
+      "details": "Details",
+      "download": "Download"
     },
     "errors": {
       "generic": "An error has occurred",
@@ -26,6 +28,7 @@
       "tax-code-invalid": "Enter a valid tax code",
       "vat-number-invalid": "Enter a valid VAT number",
       "cap-invalid": "Enter a valid zip code",
+      "iban-invalid": "Enter a valid IBAN",
       "regex-invalid": "Please enter a valid REGEX expression",
       "pattern-invalid": "The field must have the pattern {{pattern}}",
       "password-no-match": "Passwords must match",

projects/design-angular-kit/assets/i18n/it.json

@@ -7,8 +7,10 @@
       "close": "Chiudi",
       "continue": "Continua",
       "edit": "Modifica",
+      "show": "Visualizza",
       "show-all": "Mostra tutto",
-      "details": "Dettagli"
+      "details": "Dettagli",
+      "download": "Scarica"
     },
     "errors": {
       "generic": "Si è verificato un errore",
@@ -26,6 +28,7 @@
       "tax-code-invalid": "Inserisci un codice fiscale valido",
       "vat-number-invalid": "Inserisci una partita iva valida",
       "cap-invalid": "Inserisci un CAP valido",
+      "iban-invalid": "Inserisci un IBAN valido",
       "regex-invalid": "Inserisci un espressione REGEX valida",
       "pattern-invalid": "Il campo deve avere il pattern {{pattern}}",
       "password-no-match": "Le password devono essere identiche",

projects/design-angular-kit/src/lib/components/form/input/input.component.ts

@@ -173,6 +173,9 @@ export class ItInputComponent extends ItAbstractFormComponent<string | number> i
     if (this.hasError('invalidCap')) {
       return this._translateService.get('it.errors.cap-invalid');
     }
+    if (this.hasError('invalidIban')) {
+      return this._translateService.get('it.errors.iban-invalid');
+    }
     if (this.hasError('invalidRegex')) {
       return this._translateService.get('it.errors.regex-invalid');
     }

projects/design-angular-kit/src/lib/utils/regex.ts

@@ -2,29 +2,35 @@
  * General Email Regex (RFC 5322 Official Standard)
  * http://emailregex.com/
  */
-export const EMAIL_REGEX = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/
+export const EMAIL_REGEX = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
 
 /**
  * Phone number Regex
  */
-export const PHONE_NUMBER_REGEX = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{3})(?: *x(\d+))?\s*$/
+export const PHONE_NUMBER_REGEX = /^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{3})(?: *x(\d+))?\s*$/;
 
 /**
  * URL Regex
  */
-export const URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/
+export const URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;
 
 /**
  * The italian tax code Regex (Codice Fiscale)
  */
-export const ITALIAN_TAX_CODE_REGEX = /^[A-Za-z]{6}[0-9]{2}[A-Za-z]{1}[0-9]{2}[A-Za-z]{1}[0-9]{3}[A-Za-z]{1}$/i
+export const ITALIAN_TAX_CODE_REGEX = /^[A-Za-z]{6}[0-9]{2}[A-Za-z]{1}[0-9]{2}[A-Za-z]{1}[0-9]{3}[A-Za-z]{1}$/i;
 
 /**
  * The VAT number Regex (Partita iva)
  */
-export const VAT_NUMBER_REGEX = /^[0-9]{11}$/
+export const VAT_NUMBER_REGEX = /^[0-9]{11}$/;
 
 /**
  * Italian CAP Regex
  */
 export const CAP_REGEX = /^[0-9]{5}$/;
+
+/**
+ * IBAN Regex
+ * https://blog.marketto.it/en/2018/06/validate-any-country-iban/
+ */
+export const IBAN_REGEX = /^(?:(?:IT|SM)\d{2}[A-Z]\d{22}|CY\d{2}[A-Z]\d{23}|NL\d{2}[A-Z]{4}\d{10}|LV\d{2}[A-Z]{4}\d{13}|(?:BG|BH|GB|IE)\d{2}[A-Z]{4}\d{14}|GI\d{2}[A-Z]{4}\d{15}|RO\d{2}[A-Z]{4}\d{16}|KW\d{2}[A-Z]{4}\d{22}|MT\d{2}[A-Z]{4}\d{23}|NO\d{13}|(?:DK|FI|GL|FO)\d{16}|MK\d{17}|(?:AT|EE|KZ|LU|XK)\d{18}|(?:BA|HR|LI|CH|CR)\d{19}|(?:GE|DE|LT|ME|RS)\d{20}|IL\d{21}|(?:AD|CZ|ES|MD|SA)\d{22}|PT\d{23}|(?:BE|IS)\d{24}|(?:FR|MR|MC)\d{25}|(?:AL|DO|LB|PL)\d{26}|(?:AZ|HU)\d{27}|(?:GR|MU)\d{28})$/i;

projects/design-angular-kit/src/lib/validators/it-validators.ts

@@ -2,6 +2,7 @@ import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@ang
 import {
   CAP_REGEX,
   EMAIL_REGEX,
+  IBAN_REGEX,
   ITALIAN_TAX_CODE_REGEX,
   PHONE_NUMBER_REGEX,
   URL_REGEX,
@@ -151,6 +152,13 @@ export class ItValidators {
     return ItValidators.customPattern(CAP_REGEX, { invalidCap: true });
   }
 
+  /**
+   * IBAN validator
+   */
+  public static get iban(): ValidatorFn {
+    return ItValidators.customPattern(IBAN_REGEX, { invalidIban: true });
+  }
+
   /**
    * Check if value is a valid RegExp
    */

src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html

@@ -2,22 +2,30 @@ <h3>Interazione con Form Input dotato di validazione Model Driven</h3>
 
 <div class="bd-example">
   <form [formGroup]="myForm">
-    <it-input label="Custom" formControlName="myInput" #myInput>
-      <ng-container error>
-        <!-- Custom errors-->
-        <div *ngIf="myInput.hasError('required')">Il campo è obbligatorio</div>
-        <div *ngIf="myInput.hasError('minlength')">Deve essere almeno di lunghezza 3</div>
-        <div *ngIf="myInput.hasError('maxlength')">Deve essere massimo di lunghezza 10</div>
-        <div *ngIf="myInput.hasError('pattern')">Non corrisponde al pattern [ab]+</div>
-      </ng-container>
-    </it-input>
 
     <div class="row">
-      <div class="col-4">
+      <div class="col-6">
+        <it-input label="Custom" formControlName="myInput" #myInput>
+          <ng-container error>
+            <!-- Custom errors-->
+            <div *ngIf="myInput.hasError('required')">Il campo è obbligatorio</div>
+            <div *ngIf="myInput.hasError('minlength')">Deve essere almeno di lunghezza 3</div>
+            <div *ngIf="myInput.hasError('maxlength')">Deve essere massimo di lunghezza 10</div>
+            <div *ngIf="myInput.hasError('pattern')">Non corrisponde al pattern [ab]+</div>
+          </ng-container>
+        </it-input>
+      </div>
+      <div class="col-6">
         <it-input label="Codice fiscale" formControlName="taxCode" required>
           <!-- Default errors-->
         </it-input>
       </div>
+    </div>
+
+    <div class="row">
+      <div class="col-4">
+        <it-input label="IBAN" formControlName="iban"></it-input>
+      </div>
       <div class="col-4">
         <it-input label="Partita IVA" formControlName="vat" required></it-input>
       </div>

src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts

@@ -25,6 +25,7 @@ export class ModelDrivenValidationExampleComponent {
       email: [null],
       url: [null],
       phone: [null],
+      iban: [null, ItValidators.iban],
       myInput: ['', validators],
     });
   }