feat: select can assign object as a value

Closes #270
italia · Sep 30, 2023 · bc892c7 · bc892c7
1 parent b8d43f7
commit bc892c7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts b/projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts
@@ -33,7 +33,7 @@ export abstract class ItAbstractFormComponent<T = any> extends ItAbstractCompone
   /**
    * Internal form control
    */
-  protected control: FormControl;
+  protected control: FormControl<T>;
 
   constructor(
     protected readonly _translateService: TranslateService,

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
@@ -96,7 +96,7 @@ export class ItInputComponent extends ItAbstractFormComponent<string | number |
    * If you need to retrieve items via API, can pass a function of Observable
    * @default undefined
    */
-  @Input() autocompleteData?: Array<AutocompleteItem> | ((search?: string) => Observable<Array<AutocompleteItem>>);
+  @Input() autocompleteData?: Array<AutocompleteItem> | ((search?: string | number | null) => Observable<Array<AutocompleteItem>>);
 
   /**
    * Time span [ms] has passed without another source emission, to delay data filtering.
@@ -189,7 +189,7 @@ export class ItInputComponent extends ItAbstractFormComponent<string | number |
 
   /** Observable da cui vengono emessi i risultati dell'auto completamento */
   autocompleteResults$: Observable<{
-    searchedValue: string,
+    searchedValue: string | number | null | undefined,
     relatedEntries: Array<AutocompleteItem>
   }> = new Observable();
 
@@ -250,7 +250,7 @@ export class ItInputComponent extends ItAbstractFormComponent<string | number |
   /**
    * Create the autocomplete list
    */
-  private getAutocompleteResults$(): Observable<{ searchedValue: string, relatedEntries: Array<AutocompleteItem> }> {
+  private getAutocompleteResults$(): Observable<{ searchedValue: string | number | null | undefined, relatedEntries: Array<AutocompleteItem> }> {
     if (this.type !== 'search') {
       return of({ searchedValue: '', relatedEntries: [] });
     }
@@ -259,13 +259,13 @@ export class ItInputComponent extends ItAbstractFormComponent<string | number |
       distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
       switchMap(searchedValue => {
         if (!this.autocompleteData) {
-          return of({ searchedValue, relatedEntries: [] });
+          return of({ searchedValue, relatedEntries: <Array<AutocompleteItem>>[] });
         }
 
         const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
         return autoCompleteData$.pipe(
           map(autocompleteData => {
-            if (!searchedValue) {
+            if (!searchedValue || typeof searchedValue === 'number') {
               return { searchedValue, relatedEntries: [] };
             }
 

diff --git a/projects/design-angular-kit/src/lib/components/form/select/select.component.html b/projects/design-angular-kit/src/lib/components/form/select/select.component.html
@@ -6,21 +6,21 @@
           (blur)="markAsTouched()"
           [attr.aria-describedby]="id + '-description'">
 
-    <option *ngIf="defaultOption" [value]="null" disabled selected>
+    <option *ngIf="defaultOption" [ngValue]="null" disabled selected>
       {{defaultOption}}
     </option>
 
     <ng-content></ng-content>
 
     <ng-container *ngIf="options">
-      <option *ngFor="let option of options" [disabled]="optionIsDisabled(option)" [value]="option.value">
+      <option *ngFor="let option of options" [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
         {{option.text ?? option.value}}
       </option>
     </ng-container>
 
     <ng-container *ngIf="groups">
       <optgroup *ngFor="let group of groups" [label]="group.label">
-        <option *ngFor="let option of group.options" [disabled]="optionIsDisabled(option)" [value]="option.value">
+        <option *ngFor="let option of group.options" [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
           {{option.text ?? option.value}}
         </option>
       </optgroup>

diff --git a/projects/design-angular-kit/src/lib/interfaces/form.ts b/projects/design-angular-kit/src/lib/interfaces/form.ts
@@ -2,16 +2,16 @@ import { IconName } from './icon';
 
 export type InputControlType = 'text' | 'email' | 'number' | 'date' | 'time' | 'tel' | 'color' | 'url' | 'search';
 
-export interface SelectControlOption {
-  value: any,
+export interface SelectControlOption<T = any> {
+  value: T,
   text?: string,
-  selected?: boolean | ((value: any) => boolean),
-  disabled?: boolean | ((value: any) => boolean)
+  selected?: boolean | ((value: T) => boolean),
+  disabled?: boolean | ((value: T) => boolean)
 }
 
-export interface SelectControlGroup {
+export interface SelectControlGroup<T = any> {
   label: string,
-  options: Array<SelectControlOption>,
+  options: Array<SelectControlOption<T>>,
   dragdrop?: boolean
 }