Style

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

@@ -1,22 +1,20 @@
-<!-- create-qualification.component.html -->
-<form [formGroup]="qualificationForm" (ngSubmit)="create()" class="space-y-4">
-    <div>
-        <label for="skill-input" class="block mb-1">Skill</label>
-        <input
-                id="skill-input"
-                type="text"
-                formControlName="skill"
-                class="w-full p-2 border rounded"
-                [ngClass]="{'border-red-500 focus:ring-0 focus:outline-none': isFieldInvalid('skill')}">
+<h2 mat-dialog-title>Create Qualification</h2>
+<mat-dialog-content>
+    <form [formGroup]="qualificationForm" (ngSubmit)="create()">
+        <div class="!space-y-4">
+            <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>
 
-        <div
-                *ngIf="isFieldInvalid('skill')"
-                class="text-sm text-red-500 mt-1">
-            {{ getErrorMessage('skill') }}
+            <mat-dialog-actions align="end">
+                <button mat-flat-button color="primary" type="submit">Create</button>
+            </mat-dialog-actions>
         </div>
-    </div>
-
-    <button type="submit">
-        Create
-    </button>
-</form>
+    </form>
+</mat-dialog-content>

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

@@ -1,15 +1,25 @@
 import {Component, inject} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
 import QualificationService from "../services/qualification.service";
-import {MatDialogRef} from "@angular/material/dialog";
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
 import {NgClass, NgIf} from "@angular/common";
+import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatButton} from "@angular/material/button";
+import {MatInput} from "@angular/material/input";
 
 @Component({
     selector: 'app-create-qualification',
     imports: [
         ReactiveFormsModule,
-        NgClass,
-        NgIf
+        MatError,
+        NgIf,
+        MatLabel,
+        MatDialogTitle,
+        MatDialogContent,
+        MatFormField,
+        MatDialogActions,
+        MatButton,
+        MatInput
     ],
     templateUrl: './create-qualification.component.html',
     styleUrl: './create-qualification.component.css'