feature(ui-dialog): Adjusted Feedback Error Dialog displaying invalidErrors if available

Ref: #5417

libs/ui/dialog/src/lib/feedback-error-dialog/feedback-error-dialog.component.html

@@ -14,4 +14,17 @@
   >
     {{ errorMessage }}
   </p>
+
+  @if (invalidProperties) {
+    <ul
+      class="w-full flex flex-col gap-2 text-isa-neutral-900"
+      data-what="invalid-properties"
+    >
+      @for (entry of invalidProperties | keyvalue; track entry.key) {
+        <li>
+          <strong>{{ entry.key }}:</strong> {{ entry.value }}
+        </li>
+      }
+    </ul>
+  }
 </div>

libs/ui/dialog/src/lib/feedback-error-dialog/feedback-error-dialog.component.spec.ts

@@ -99,4 +99,56 @@ describe('FeedbackErrorDialogComponent', () => {
       expect(iconElement).toHaveAttribute('size', '1.5rem');
     });
   });
+
+  describe('invalidProperties', () => {
+    it('should not display invalidProperties when not present', () => {
+      // Arrange
+      currentDialogData = { errorMessage: 'Test error' };
+      spectator = createComponent();
+
+      // Assert
+      expect(spectator.query('[data-what="invalid-properties"]')).toBeFalsy();
+    });
+
+    it('should display invalidProperties from error object', () => {
+      // Arrange
+      currentDialogData = {
+        error: {
+          invalidProperties: {
+            field1: 'Fehler bei Feld 1',
+            field2: 'Fehler bei Feld 2',
+          },
+        },
+      };
+      spectator = createComponent();
+
+      // Assert
+      const list = spectator.query('[data-what="invalid-properties"]');
+      expect(list).toBeTruthy();
+      expect(list).toHaveText('field1');
+      expect(list).toHaveText('Fehler bei Feld 1');
+      expect(list).toHaveText('field2');
+      expect(list).toHaveText('Fehler bei Feld 2');
+    });
+
+    it('should display invalidProperties from error.error (HttpErrorResponse)', () => {
+      // Arrange
+      currentDialogData = {
+        error: {
+          error: {
+            invalidProperties: {
+              email: 'Ungültige E-Mail',
+            },
+          },
+        },
+      };
+      spectator = createComponent();
+
+      // Assert
+      const list = spectator.query('[data-what="invalid-properties"]');
+      expect(list).toBeTruthy();
+      expect(list).toHaveText('email');
+      expect(list).toHaveText('Ungültige E-Mail');
+    });
+  });
 });

libs/ui/dialog/src/lib/feedback-error-dialog/feedback-error-dialog.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KeyValuePipe } from '@angular/common';
 import { DialogContentDirective } from '../dialog-content.directive';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { isaActionClose } from '@isa/icons';
@@ -26,7 +27,7 @@ export type FeedbackErrorDialogData =
   selector: 'ui-feedback-error-dialog',
   templateUrl: './feedback-error-dialog.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIcon],
+  imports: [NgIcon, KeyValuePipe],
   providers: [provideIcons({ isaActionClose })],
   host: {
     '[class]': '["ui-feedback-error-dialog"]',
@@ -54,4 +55,24 @@ export class FeedbackErrorDialogComponent extends DialogContentDirective<
     }));
     return 'Ein unbekannter Fehler ist aufgetreten';
   }
+
+  /** Hole invalidProperties wenn vorhanden (direkt am error oder in error.error) */
+  get invalidProperties(): Record<string, string> | null {
+    if (!('error' in this.data)) return null;
+
+    const err = this.data.error as Record<string, unknown>;
+
+    // Check 1: Direkt auf error
+    if (err?.['invalidProperties']) {
+      return err['invalidProperties'] as Record<string, string>;
+    }
+
+    // Check 2: Auf error.error (HttpErrorResponse)
+    const inner = err?.['error'] as Record<string, unknown>;
+    if (inner?.['invalidProperties']) {
+      return inner['invalidProperties'] as Record<string, string>;
+    }
+
+    return null;
+  }
 }