Validation

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

@@ -2,11 +2,14 @@ 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 {NgClass, NgIf} from "@angular/common";
 
 @Component({
     selector: 'app-create-qualification',
     imports: [
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        NgClass,
+        NgIf
     ],
     templateUrl: './create-qualification.component.html',
     styleUrl: './create-qualification.component.css'
@@ -20,6 +23,19 @@ export class CreateQualificationComponent {
         'skill': ['', Validators.required],
     });
 
+    isFieldInvalid(fieldName: string): boolean {
+        const field = this.qualificationForm.get(fieldName);
+        return !!field?.invalid && (field.dirty || field.touched);
+    }
+
+    getErrorMessage(fieldName: string): string {
+        const field = this.qualificationForm.get(fieldName);
+        if (field?.errors?.['required']) {
+            return 'This field is required';
+        }
+        return '';
+    }
+
     create() {
         if (!this.qualificationForm.valid) {
             console.error('Validation failed');