From ee503bb566a1e1734cb6f1e7cb44400d6185ec0e Mon Sep 17 00:00:00 2001 From: jojohoch <joachim.hoch@iqb.hu-berlin.de> Date: Thu, 12 Aug 2021 11:26:23 +0200 Subject: [PATCH] [player] Show `requiredTrue` messages for checkboxes --- .../element-overlay/element-overlay.component.css | 1 + .../validation-message/validation-message.component.html | 6 +++--- .../validation-message/validation-message.component.ts | 5 +++++ projects/player/src/assets/i18n/de.json | 1 + 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/projects/player/src/app/components/element-overlay/element-overlay.component.css b/projects/player/src/app/components/element-overlay/element-overlay.component.css index 65d9946c2..e34a48d1a 100644 --- a/projects/player/src/app/components/element-overlay/element-overlay.component.css +++ b/projects/player/src/app/components/element-overlay/element-overlay.component.css @@ -1,4 +1,5 @@ .dynamic-validation-messages{ + position: relative; display: block; margin-top: -20px; } diff --git a/projects/player/src/app/components/validation-message/validation-message.component.html b/projects/player/src/app/components/validation-message/validation-message.component.html index 0e317b5d9..2028732c5 100644 --- a/projects/player/src/app/components/validation-message/validation-message.component.html +++ b/projects/player/src/app/components/validation-message/validation-message.component.html @@ -1,11 +1,11 @@ <ng-container *ngIf="formElementControl && formElementControl.touched"> - <mat-error *ngIf="formElementControl.errors?.required" + <mat-error *ngIf="formElementControl.errors?.required && elementModel.type !== 'checkbox'" [ngClass]="elementModel.dynamicPositioning ? 'dynamic-validation-message' : ''" > {{requiredMessage}} </mat-error> - <mat-error *ngIf="formElementControl.errors?.requiredTrue" + <mat-error *ngIf="formElementControl.errors?.required && elementModel.type === 'checkbox'" [ngClass]="elementModel.dynamicPositioning ? 'dynamic-validation-message' : ''" > - {{requiredMessage}} + {{requiredTrueMessage}} </mat-error> <mat-error *ngIf="formElementControl.errors?.minlength" [ngClass]="elementModel.dynamicPositioning ? 'dynamic-validation-message' : ''" > diff --git a/projects/player/src/app/components/validation-message/validation-message.component.ts b/projects/player/src/app/components/validation-message/validation-message.component.ts index 39a696c64..480dc86a4 100644 --- a/projects/player/src/app/components/validation-message/validation-message.component.ts +++ b/projects/player/src/app/components/validation-message/validation-message.component.ts @@ -4,6 +4,7 @@ import { } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; import { + CheckboxElement, InputUIElement, NumberFieldElement, TextFieldElement, UnitUIElement } from '../../../../../common/unit'; import { FormService } from '../../../../../common/form.service'; @@ -19,6 +20,7 @@ export class ValidationMessageComponent implements OnInit { @Input() parentForm!: FormGroup; formElementControl!: FormControl; requiredMessage!: string; + requiredTrueMessage!: string; minLengthMessage!: string; maxLengthMessage!: string; minMessage!: string; @@ -66,6 +68,9 @@ export class ValidationMessageComponent implements OnInit { this.requiredMessage = (this.elementModel as InputUIElement).requiredWarnMessage || this.translateService.instant('validators.inputRequired'); + this.requiredTrueMessage = (this.elementModel as CheckboxElement).requiredWarnMessage || + this.translateService.instant('validators.inputRequiredTrue'); + this.minLengthMessage = (this.elementModel as TextFieldElement).minWarnMessage || this.translateService.instant('validators.inputTooShort'); diff --git a/projects/player/src/assets/i18n/de.json b/projects/player/src/assets/i18n/de.json index bb94d9f10..12e695e3c 100644 --- a/projects/player/src/assets/i18n/de.json +++ b/projects/player/src/assets/i18n/de.json @@ -5,6 +5,7 @@ "noReason": "Navigation ohne Angabe von Gründen verweigert", "validators": { "inputRequired": "Eingabe erforderlich", + "inputRequiredTrue": "Ankreuzen erforderlich", "InputTooShort": "Eingabe zu kurz", "InputTooLong": "Eingabe zu lang", "ValueTooSmall": "Wert zu klein", -- GitLab