Display api errors

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

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';
             }
         });
     }