MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Input: Show static placeholder in case of autocomplete. Update validators of form control when input validators is changed

This commit is contained in:
Konstantinos Triantafyllou 2023-03-07 12:26:26 +02:00
parent 4a03065dbd
commit 1d2a0effa8
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
sharedComponents/input/input.component.ts
View File

@ -85,7 +85,10 @@ declare var UIkit;
<ng-template [ngIf]="type === 'autocomplete'"> <ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint" <input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused"> #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" > <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">{{noValueSelected}}</div>
<div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</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"> <ng-template [ngIf]="formControl.enabled">
<icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon> <icon *ngIf="!searchControl?.value && icon" [name]="icon" [flex]="true"></icon>
<icon *ngIf="!icon && selectable && selectArrow" [name]="selectArrow" [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)"> (click)="resetSearch($event)">
<icon [flex]="true" name="close"></icon> <icon [flex]="true" name="close"></icon>
</button> </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> <icon [flex]="true" name="close"></icon>
</button> </button>
</ng-template> </ng-template>
@ -328,8 +331,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.formAsArray.push(new UntypedFormControl(value, this.validators)); this.formAsArray.push(new UntypedFormControl(value, this.validators));
}); });
} else { } else {
this.formControl = new UntypedFormControl(this.value); this.formControl = new UntypedFormControl(this.value, this.validators);
this.formControl.setValidators(this.validators);
} }
if (this.disabled) { if (this.disabled) {
this.formControl.disable(); this.formControl.disable();
@ -346,6 +348,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (changes.value) { if (changes.value) {
this.formControl.setValue(this.value); this.formControl.setValue(this.value);
} }
if(changes.validators) {
this.updateValidators();
}
if (changes.formControl || changes.validators || changes.options) { if (changes.formControl || changes.validators || changes.options) {
this.reset(); 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) { remove(index: number, event) {
if (this.focused) { if (this.focused) {
this.formAsArray.removeAt(index); this.formAsArray.removeAt(index);