feat: add includes validator

Author: astagi

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

@@ -50,32 +50,43 @@ export class ItAutocompleteComponent extends ItAbstractFormComponent<string | nu
   /**
    * Function to set assistive hint label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
    */
-  @Input() assistiveHintLabel: () => string = undefined;
+  @Input() assistiveHintLabel: () => string = () =>
+    'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';
 
   /**
    * Function to set label in case of no result. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
    */
-  @Input() noResultsLabel: () => string = undefined;
+  @Input() noResultsLabel: () => string = () => 'Nessun risultato trovato';
 
   /**
    * Function to set label that alerts you that query's too short. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
    */
-  @Input() statusQueryTooShortLabel: (minQueryLength: number) => string = undefined;
+  @Input() statusQueryTooShortLabel: (minQueryLength: number) => string = minQueryLength =>
+    `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
 
   /**
    * Function to set no results label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
    */
-  @Input() statusNoResultsLabel: () => string = undefined;
+  @Input() statusNoResultsLabel: () => string = () => 'Nessun risultato di ricerca';
 
   /**
    * Function to set selected option label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
    */
-  @Input() statusSelectedOptionLabel: (selectedOption: string, length: number, index: number) => string = undefined;
+  @Input() statusSelectedOptionLabel: (selectedOption: string, length: number, index: number) => string = (selectedOption, length, index) =>
+    `${selectedOption} ${index + 1} di ${length} è sottolineato`;
 
   /**
    * Function to set status results label. For more information https://github.com/alphagov/accessible-autocomplete?tab=readme-ov-file#internationalization
    */
-  @Input() statusResultsLabel: (length: number, contentSelectedOption: string) => string = undefined;
+  @Input() statusResultsLabel: (length: number, contentSelectedOption: string) => string = (length, contentSelectedOption) => {
+    const words = {
+      result: length === 1 ? 'risultato' : 'risultati',
+      is: length === 1 ? 'è' : 'sono',
+      available: length === 1 ? 'disponibile' : 'disponibili',
+    };
+
+    return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
+  };
 
   /**
    * Fired when value changes

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

@@ -133,6 +133,12 @@ export class ItValidators {
     return ItValidators.customPattern(PHONE_NUMBER_REGEX, { invalidTel: true });
   }
 
+  public static includes(possibleValues: string[]): ValidatorFn {
+    return formControl => {
+      return possibleValues?.includes(formControl.value) ? null : { invalidSelection: true };
+    };
+  }
+
   /**
    * URL validator
    */

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

@@ -9,21 +9,9 @@ import { ItValidators } from 'design-angular-kit/validators/it-validators';
 })
 export class ModelDrivenValidationExampleComponent {
   myForm: FormGroup;
-  regions: string[];
+  regions: string[] = [];
 
   constructor(private _fb: FormBuilder) {
-    const validators = [Validators.required, Validators.minLength(3), Validators.maxLength(10), Validators.pattern('[ab]+')];
-    this.myForm = this._fb.group({
-      taxCode: [null, ItValidators.taxCode],
-      vat: [null, ItValidators.vatNumber],
-      cap: [null, ItValidators.cap],
-      email: [null],
-      url: [null],
-      phone: [null],
-      region: [null],
-      iban: [null, ItValidators.iban],
-      myInput: ['', validators],
-    });
     this.regions = [
       'Abruzzo',
       'Basilicata',
@@ -46,6 +34,18 @@ export class ModelDrivenValidationExampleComponent {
       "Valle d'Aosta",
       'Veneto',
     ];
+    const validators = [Validators.required, Validators.minLength(3), Validators.maxLength(10), Validators.pattern('[ab]+')];
+    this.myForm = this._fb.group({
+      taxCode: [null, ItValidators.taxCode],
+      vat: [null, ItValidators.vatNumber],
+      cap: [null, ItValidators.cap],
+      email: [null],
+      url: [null],
+      phone: [null],
+      region: [null, ItValidators.includes(this.regions)],
+      iban: [null, ItValidators.iban],
+      myInput: ['', validators],
+    });
   }
 
   value = '';