From e24faf7eaaa53d9d3d2bb575f3de58810b388bac Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 8 Jan 2025 11:08:03 +0100
Subject: [PATCH] Display api errors

---
 .../create-qualification/create-qualification.component.html  | 4 ++++
 .../create-qualification/create-qualification.component.ts    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/app/create-qualification/create-qualification.component.html b/src/app/create-qualification/create-qualification.component.html
index 40fc188..27f30c4 100644
--- a/src/app/create-qualification/create-qualification.component.html
+++ b/src/app/create-qualification/create-qualification.component.html
@@ -2,6 +2,10 @@
 <mat-dialog-content>
     <form [formGroup]="qualificationForm" (ngSubmit)="create()">
         <div class="!space-y-4">
+            @if (apiErrorMessage) {
+                <mat-error>{{ apiErrorMessage }}</mat-error>
+            }
+
             <mat-form-field class="!w-full">
                 <mat-label>Skill</mat-label>
                 <input matInput
diff --git a/src/app/create-qualification/create-qualification.component.ts b/src/app/create-qualification/create-qualification.component.ts
index ec12768..0c05181 100644
--- a/src/app/create-qualification/create-qualification.component.ts
+++ b/src/app/create-qualification/create-qualification.component.ts
@@ -29,6 +29,8 @@ export class CreateQualificationComponent {
     private qualificationService: QualificationService = inject(QualificationService);
     private dialogRef: MatDialogRef<CreateQualificationComponent> = inject(MatDialogRef);
 
+    public apiErrorMessage: string = '';
+
     qualificationForm = this.formBuilder.group({
         'skill': ['', Validators.required],
     });
@@ -58,6 +60,8 @@ export class CreateQualificationComponent {
             },
             error: (error) => {
                 console.error('Error creating qualification:', error);
+
+                this.apiErrorMessage = 'API Error';
             }
         });
     }