feat: add error handling for skill form validation

src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts

@@ -104,7 +104,7 @@ export class MitarbeiterFormComponent {
     Object.keys(this.mitarbeiterForm.controls).forEach(field => {
       const control = this.mitarbeiterForm.get(field);
 
-      if (control && control.errors && control.touched) {
+      if (control && control.errors) {
         this.errorMessages[field] = Object.keys(control.errors)
           .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
           .join(' ');

src/app/components/qualifikation-form/qualifikation-form.component.html

@@ -3,6 +3,9 @@
     <button class="back-button">Back</button>
 
     <div class="form-group">
+      @if (errorMessages['name']) {
+      <div class="alert alert-danger">{{errorMessages['name']}}</div>
+      }
       <label for="name">Name</label>
       <input type="text" id="name" formControlName="name">
     </div>

src/app/components/qualifikation-form/qualifikation-form.component.ts

@@ -22,9 +22,29 @@ export class QualifikationFormComponent {
   public skillForm!: FormGroup;
   public addableEmployees: Array<EmployeeResponseDTO> = [];
   public addedEmployees: Array<EmployeeNameDataDTO> = [];
+  errorMessages: Record<string, string> = {};
+
 
   constructor(private skillService: SkillService, private employeeService: EmployeeService, private router: Router) { }
 
+  private validationErrorMessages: Record<string, string> = {
+    required: "This field is required",
+  };
+
+  updateErrorMessages(): void {
+    this.errorMessages = {};
+
+    Object.keys(this.skillForm.controls).forEach(field => {
+      const control = this.skillForm.get(field);
+
+      if (control && control.errors) {
+        this.errorMessages[field] = Object.keys(control.errors)
+          .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
+          .join(' ');
+      }
+    });
+  }
+
   setUpForm() {
     this.skillForm = new FormGroup({
       name: new FormControl(this.skill.skill, Validators.required),
@@ -73,6 +93,11 @@ export class QualifikationFormComponent {
   }
 
   submit() {
+    this.updateErrorMessages();
+    if (!this.skillForm.valid) {
+      return;
+    }
+
     for (const employee of this.addedEmployees) {
       this.employeeService.getEmployeeById(employee.id).subscribe(employeeResponse => {
         this.employeeService.addSkillToEmployee(this.skill.id, employeeResponse);

src/app/components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component.ts

@@ -18,7 +18,7 @@ export class QualifikatonBearbeitenViewComponent {
   constructor(private skillService: SkillService, private route: ActivatedRoute) {}
 
   submitted(skill: QualificationGetDTO) {
-    console.log(skill);
+    this.skillService.updateSkill(skill);
   }
 
   ngOnInit(): void {

src/app/service/skill.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { EmployeesForAQualificationDTO, QualificationGetDTO } from "../models/skill";
+import { EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO } from "../models/skill";
 import { Observable } from "rxjs";
 import { EmployeeNameDataDTO } from "../models/mitarbeiter";
 
@@ -11,10 +11,20 @@ export class SkillService {
 
   public static readonly BASE_URL = "http://localhost:8089";
 
+  getToPutDto(skill: QualificationGetDTO): QualificationPostDTO {
+    return {
+      skill: skill.skill,
+    }
+  }
+
   constructor(private http: HttpClient) {
 
   }
 
+  updateSkill(skill: QualificationGetDTO) {
+    this.http.put(`${SkillService.BASE_URL}/qualifications/${skill.id}`, this.getToPutDto(skill)).subscribe();
+  }
+
   getAllSkills(): Observable<Array<QualificationGetDTO>> {
     return this.http.get<Array<QualificationGetDTO>>(`${SkillService.BASE_URL}/qualifications`);
   }