correctly display validation errors for "photo" form field (#2717)

fixes #2713
Aam-Digital · Dec 16, 2024 · 9812d5c · 9812d5c
1 parent 599c381
commit 9812d5c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 39 deletions.
diff --git a/src/app/features/file/edit-photo/edit-photo.component.html b/src/app/features/file/edit-photo/edit-photo.component.html
@@ -1,41 +1,52 @@
-<img [src]="imgPath" alt="Image" class="image" (click)="openPopup()" />
+<div class="photo-container">
+  <img [src]="imgPath" alt="Image" class="image" (click)="openPopup()" />
 
-<div
-  class="img-controls"
-  [matTooltipDisabled]="!(formControl.enabled && !navigator.onLine)"
-  matTooltip="Changes to files are not possible offline."
-  i18n-matTooltip
->
-  <label class="img-label">{{ label }}</label>
-
-  <button
-    *ngIf="formControl.value && formControl.enabled"
-    type="button"
-    mat-icon-button
-    (click)="delete()"
-    i18n-mattooltip="Tooltip remove file"
-    matTooltip="Remove file"
-    [disabled]="!navigator.onLine"
-  >
-    <fa-icon icon="xmark"></fa-icon>
-  </button>
-  <button
-    *ngIf="formControl.enabled"
-    type="button"
-    mat-icon-button
-    (click)="fileUpload.click()"
-    i18n-matTooltip="Tooltip upload file button"
-    matTooltip="Upload file"
-    [disabled]="!navigator.onLine"
+  <div
+    class="img-controls"
+    [matTooltipDisabled]="!(formControl.enabled && !navigator.onLine)"
+    matTooltip="Changes to files are not possible offline."
+    i18n-matTooltip
   >
-    <fa-icon icon="upload"></fa-icon>
-  </button>
+    <label
+      class="img-label"
+      [ngClass]="{ invalid: formControl.invalid && formControl.touched }"
+      >{{ label }}</label
+    >
+
+    <button
+      *ngIf="formControl.value && formControl.enabled"
+      type="button"
+      mat-icon-button
+      (click)="delete()"
+      i18n-matTooltip="Tooltip remove file"
+      matTooltip="Remove file"
+      [disabled]="!navigator.onLine"
+    >
+      <fa-icon icon="xmark"></fa-icon>
+    </button>
+    <button
+      *ngIf="formControl.enabled"
+      type="button"
+      mat-icon-button
+      (click)="fileUpload.click()"
+      i18n-matTooltip="Tooltip upload file button"
+      matTooltip="Upload file"
+      [disabled]="!navigator.onLine"
+    >
+      <fa-icon icon="upload"></fa-icon>
+    </button>
 
-  <input
-    type="file"
-    style="display: none"
-    (change)="onFileSelected($event.target['files'][0])"
-    [accept]="acceptedFileTypes"
-    #fileUpload
-  />
+    <input
+      type="file"
+      style="display: none"
+      (change)="onFileSelected($event.target['files'][0])"
+      [accept]="acceptedFileTypes"
+      #fileUpload
+    />
+  </div>
+  @if (formControl.invalid && formControl.touched) {
+    <mat-error>
+      <app-error-hint [form]="formControl"></app-error-hint>
+    </mat-error>
+  }
 </div>
diff --git a/src/app/features/file/edit-photo/edit-photo.component.scss b/src/app/features/file/edit-photo/edit-photo.component.scss
@@ -1,3 +1,5 @@
+@use "variables/colors";
+
 :host {
   display: flex;
   flex-direction: column;
@@ -23,3 +25,6 @@
   margin: auto;
   color: rgba(0, 0, 0, 0.6);
 }
+.img-label.invalid {
+  color: colors.$error;
+}
diff --git a/src/app/features/file/edit-photo/edit-photo.component.ts b/src/app/features/file/edit-photo/edit-photo.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { DynamicComponent } from "../../../core/config/dynamic-components/dynamic-component.decorator";
-import { NgIf } from "@angular/common";
+import { NgClass, NgIf } from "@angular/common";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { EditFileComponent } from "../edit-file/edit-file.component";
@@ -13,7 +13,8 @@ import { resizeImage } from "../file-utils";
 import { MatDialog } from "@angular/material/dialog";
 import { ImagePopupComponent } from "./image-popup/image-popup.component";
 import { NAVIGATOR_TOKEN } from "../../../utils/di-tokens";
-import { MatHint } from "@angular/material/form-field";
+import { MatError, MatHint } from "@angular/material/form-field";
+import { ErrorHintComponent } from "app/core/common-components/error-hint/error-hint.component";
 
 @DynamicComponent("EditPhoto")
 @Component({
@@ -26,6 +27,9 @@ import { MatHint } from "@angular/material/form-field";
     FontAwesomeModule,
     NgIf,
     MatHint,
+    ErrorHintComponent,
+    MatError,
+    NgClass,
   ],
   standalone: true,
 })