From 563a9f6440c31284ab3e9ac13ac89c9ea2817469 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 30 Aug 2022 15:25:46 +0200
Subject: [PATCH] [player] Show validation errors of drop lists
---
.../common/components/input-elements/drop-list.component.ts | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 4cb890953..79acca7f3 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -17,6 +17,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
iOS 14 is not able to determine the height of the flex container-->
<div class="list"
[ngClass]="{ 'align-flex' : elementModel.orientation === 'flex', 'copyOnDrop': elementModel.copyOnDrop }"
+ [class.errors]="elementFormControl.errors && elementFormControl.touched"
[style.min-height.px]="elementModel.position.useMinHeight ? elementModel.height - 6 : null"
[class.dropList-highlight]="elementModel.highlightReceivingDropList"
[style.outline-color]="elementModel.highlightReceivingDropListColor"
@@ -115,6 +116,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.copyOnDrop .item {transform: none !important}',
'.vertical-orientation.item:not(:last-child) {margin-bottom: 5px;}',
'.horizontal-orientation.item:not(:last-child) {margin-right: 5px}',
+ '.errors {outline: 2px solid #f44336 !important;}',
'.error-message {font-size: 75%; margin-top: 10px;}', // TODO error message?
'.cdk-drag-preview {padding: 8px 20px; border-radius: 10px; z-index: 5;}',
'.drag-placeholder {background-color: lightgrey; border: dotted 3px #999; padding: 10px;}',
@@ -152,6 +154,7 @@ export class DropListComponent extends FormElementComponent {
this.elementFormControl.setValue(
(event.container.data.elementFormControl.value as DragNDropValueObject[])
);
+ event.container.data.elementFormControl.markAsTouched();
} else {
const presentValueIDs = event.container.data.elementFormControl.value
.map((value2: DragNDropValueObject) => value2.id);
@@ -166,6 +169,8 @@ export class DropListComponent extends FormElementComponent {
(event.previousContainer.data.elementFormControl.value as DragNDropValueObject[])
);
}
+ event.container.data.elementFormControl.markAsTouched();
+ event.previousContainer.data.elementFormControl.markAsTouched();
}
}
--
GitLab