From 1d2a0effa840836cbb26334eabd9e1ea3752b455 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 7 Mar 2023 12:26:26 +0200
Subject: [PATCH] Input: Show static placeholder in case of autocomplete.
 Update validators of form control when input validators is changed

---
 sharedComponents/input/input.component.ts | 27 ++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index eafbbdaa..3d95f75f 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -85,7 +85,10 @@ declare var UIkit;
             <ng-template [ngIf]="type === 'autocomplete'">
               <input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
                      #searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
-              <div *ngIf="!focused && !selectable" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
+              <ng-container *ngIf="!focused && !selectable">
+                <div *ngIf="!getLabel(formControl.value)" class="input placeholder uk-text-truncate">{{placeholderInfo?.static?placeholderInfo.label:getLabel(formAsControl.value)}}</div>
+                <div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
+              </ng-container>
               <ng-container *ngIf="!focused && selectable" >
                 <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">{{noValueSelected}}</div>
                 <div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
@@ -124,11 +127,11 @@ declare var UIkit;
               <ng-template [ngIf]="formControl.enabled">
                 <icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
                 <icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow" [flex]="true"></icon>
-                <button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close  uk-icon"
+                <button *ngIf="!!searchControl?.value && type === 'autocomplete'" class="uk-close uk-icon"
                         (click)="resetSearch($event)">
                   <icon [flex]="true" name="close"></icon>
                 </button>
-                <button *ngIf="!!formControl?.value && searchable" class="uk-close uk-icon" (click)="resetValue($event)">
+                <button *ngIf="!searchControl?.value && !!formControl?.value && (searchable || !selectable)" class="uk-close uk-icon" (click)="resetValue($event)">
                   <icon [flex]="true" name="close"></icon>
                 </button>
               </ng-template>
@@ -328,8 +331,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
           this.formAsArray.push(new UntypedFormControl(value, this.validators));
         });
       } else {
-        this.formControl = new UntypedFormControl(this.value);
-        this.formControl.setValidators(this.validators);
+        this.formControl = new UntypedFormControl(this.value, this.validators);
       }
       if (this.disabled) {
         this.formControl.disable();
@@ -346,6 +348,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       if (changes.value) {
         this.formControl.setValue(this.value);
       }
+      if(changes.validators) {
+        this.updateValidators();
+      }
       if (changes.formControl || changes.validators || changes.options) {
         this.reset();
       }
@@ -446,6 +451,18 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     });
   }
   
+  updateValidators() {
+    if(this.formAsArray) {
+      this.formAsArray.controls.forEach(control => {
+        control.setValidators(this.validators);
+        control.updateValueAndValidity();
+      })
+    } else {
+      this.formControl.setValidators(this.validators);
+      this.formControl.updateValueAndValidity();
+    }
+  }
+  
   remove(index: number, event) {
     if (this.focused) {
       this.formAsArray.removeAt(index);