src/app/qualification/create/create.component.html

@@ -1,24 +1,25 @@
 <h2 mat-dialog-title>Create Qualification</h2>
 <mat-dialog-content>
-    <form [formGroup]="qualificationForm" (ngSubmit)="create()">
-        <div class="!space-y-4">
-            @if (apiErrorMessage) {
-                <mat-error>{{ apiErrorMessage }}</mat-error>
-            }
+  <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
-                       formControlName="skill"
-                       required>
-                <mat-error *ngIf="isFieldInvalid('skill')">
-                    {{ getErrorMessage('skill') }}
-                </mat-error>
-            </mat-form-field>
+      <mat-form-field class="!w-full">
+        <mat-label>Skill</mat-label>
+        <input matInput
+               formControlName="skill"
+               required>
+        <mat-error *ngIf="isFieldInvalid('skill')">
+          {{ getErrorMessage('skill') }}
+        </mat-error>
+      </mat-form-field>
 
-            <mat-dialog-actions align="end">
-                <button mat-flat-button color="primary" type="submit">Create</button>
-            </mat-dialog-actions>
-        </div>
-    </form>
+      <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-flat-button color="primary" type="submit">Create</button>
+      </mat-dialog-actions>
+    </div>
+  </form>
 </mat-dialog-content>

src/app/qualification/create/create.component.ts

@@ -1,7 +1,13 @@
 import {Component, inject} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
-import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
+import {
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogContent,
+    MatDialogRef,
+    MatDialogTitle
+} from "@angular/material/dialog";
 import {NgIf} from "@angular/common";
 import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
 import {MatButton} from "@angular/material/button";
@@ -20,7 +26,8 @@ import {filter} from "rxjs";
         MatFormField,
         MatDialogActions,
         MatButton,
-        MatInput
+        MatInput,
+        MatDialogClose
     ],
     templateUrl: './create.component.html',
     styleUrl: './create.component.css'

src/app/qualification/edit/edit.component.html

@@ -17,6 +17,7 @@
       </mat-form-field>
 
       <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
         <button mat-flat-button color="primary" type="submit">Edit</button>
       </mat-dialog-actions>
     </div>

src/app/qualification/edit/edit.component.ts

@@ -2,11 +2,11 @@ import {Component, inject} from '@angular/core';
 import {FormBuilder, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
 import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle
+    MAT_DIALOG_DATA,
+    MatDialogActions, MatDialogClose,
+    MatDialogContent,
+    MatDialogRef,
+    MatDialogTitle
 } from "@angular/material/dialog";
 import {MatButton} from "@angular/material/button";
 import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
@@ -16,19 +16,20 @@ import {Qualification} from "../Qualification";
 
 @Component({
   selector: 'app-edit-qualification',
-  imports: [
-    FormsModule,
-    MatButton,
-    MatDialogActions,
-    MatDialogContent,
-    MatDialogTitle,
-    MatError,
-    MatFormField,
-    MatInput,
-    MatLabel,
-    NgIf,
-    ReactiveFormsModule
-  ],
+    imports: [
+        FormsModule,
+        MatButton,
+        MatDialogActions,
+        MatDialogContent,
+        MatDialogTitle,
+        MatError,
+        MatFormField,
+        MatInput,
+        MatLabel,
+        NgIf,
+        ReactiveFormsModule,
+        MatDialogClose
+    ],
   templateUrl: './edit.component.html',
   styleUrl: './edit.component.css'
 })