Import des sources angular à partir de 'headup_app'

src/app/components/shared/list-errors/list-errors.component.html

@@ -0,0 +1,11 @@
+<mat-card appearance="outlined" class="error-messages mb-4" [hidden]="!errorList.length">
+    <mat-card-content>
+        @if (errorList.length) {
+        <ul class="error-messages">
+            @for (error of errorList; track error) {
+            <li>{{ error }}</li>
+            }
+        </ul>
+        }
+    </mat-card-content>
+</mat-card>

src/app/components/shared/list-errors/list-errors.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { NgForOf, NgIf } from "@angular/common";
+import { MatCardModule } from '@angular/material/card';
+
+import { Errors } from 'src/app/core';
+
+@Component({
+    selector: 'app-list-errors',
+    templateUrl: './list-errors.component.html',
+    standalone: true,
+    imports: [NgIf, NgForOf, MatCardModule]
+})
+export class ListErrorsComponent {
+    errorList: string[] = [];
+
+    @Input() set errors(errorList: Errors | null) {
+        this.errorList = errorList
+            ? Object.keys(errorList.errors || {}).map(
+                (key) => `${key} ${errorList.errors[key]}`,
+            )
+            : [];
+    }
+}