From 24e58adc027e197eeba6bd978b45cc49312a1dbc Mon Sep 17 00:00:00 2001 From: Antonino Bonanno Date: Thu, 6 Jul 2023 23:18:48 +0200 Subject: [PATCH] feat: added iban validator --- .../design-angular-kit/assets/i18n/en.json | 5 +++- .../design-angular-kit/assets/i18n/it.json | 5 +++- .../components/form/input/input.component.ts | 3 ++ .../design-angular-kit/src/lib/utils/regex.ts | 16 +++++++---- .../src/lib/validators/it-validators.ts | 8 ++++++ ...l-driven-validation-example.component.html | 28 ++++++++++++------- ...del-driven-validation-example.component.ts | 1 + 7 files changed, 49 insertions(+), 17 deletions(-) diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json index 7a03ab1b..3b91818d 100644 --- a/projects/design-angular-kit/assets/i18n/en.json +++ b/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", diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json index 68af9fc6..62837c3d 100644 --- a/projects/design-angular-kit/assets/i18n/it.json +++ b/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", diff --git a/projects/design-angular-kit/src/lib/components/form/input/input.component.ts b/projects/design-angular-kit/src/lib/components/form/input/input.component.ts index 2de4c373..f5fef6ae 100644 --- a/projects/design-angular-kit/src/lib/components/form/input/input.component.ts +++ b/projects/design-angular-kit/src/lib/components/form/input/input.component.ts @@ -173,6 +173,9 @@ export class ItInputComponent extends ItAbstractFormComponent 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'); } diff --git a/projects/design-angular-kit/src/lib/utils/regex.ts b/projects/design-angular-kit/src/lib/utils/regex.ts index 1003c434..f50e123a 100644 --- a/projects/design-angular-kit/src/lib/utils/regex.ts +++ b/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; diff --git a/projects/design-angular-kit/src/lib/validators/it-validators.ts b/projects/design-angular-kit/src/lib/validators/it-validators.ts index 7b18db48..67f71878 100644 --- a/projects/design-angular-kit/src/lib/validators/it-validators.ts +++ b/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 */ diff --git a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html index e5ef9f50..0a40174e 100644 --- a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html +++ b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html @@ -2,22 +2,30 @@

Interazione con Form Input dotato di validazione Model Driven

- - - -
Il campo è obbligatorio
-
Deve essere almeno di lunghezza 3
-
Deve essere massimo di lunghezza 10
-
Non corrisponde al pattern [ab]+
- -
-
+
+ + + +
Il campo è obbligatorio
+
Deve essere almeno di lunghezza 3
+
Deve essere massimo di lunghezza 10
+
Non corrisponde al pattern [ab]+
+ + +
+
+
+ +
+
+ +
diff --git a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts index 431cc69a..a4dc3742 100644 --- a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts +++ b/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], }); }