From 3b8ed21b27a0482eac2a056677b4a105b18f2b31 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Wed, 15 Jan 2025 12:24:39 +0100
Subject: [PATCH] feat(mitarbeiter-form): add validation error messages display

---
 .../mitarbeiter-form.component.html           | 18 +++++++
 .../mitarbeiter-form.component.ts             | 48 +++++++++++++++----
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html
index b797a2e..5fe664d 100644
--- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html
+++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.html
@@ -4,26 +4,44 @@
     <button (click)="returnToEmployeeOverview()" class="back-button">Back</button>
     <div class="user-info">
       <div class="form-group">
+        @if (errorMessages['firstName']) {
+        <div class="alert alert-danger">{{errorMessages['firstName']}}</div>
+        }
         <label for="firstName">First Name</label>
         <input type="text" id="firstName" placeholder="First Name" formControlName="firstName">
       </div>
       <div class="form-group">
+        @if (errorMessages['lastName']) {
+        <div class="alert alert-danger">{{errorMessages['lastName']}}</div>
+        }
         <label for="lastName">Last Name</label>
         <input type="text" id="lastName" placeholder="Last Name" formControlName="lastName">
       </div>
       <div class="form-group">
+        @if (errorMessages['street']) {
+        <div class="alert alert-danger">{{errorMessages['street']}}</div>
+        }
         <label for="street">Street</label>
         <input type="text" id="street" placeholder="Street" formControlName="street">
       </div>
       <div class="form-group">
+        @if (errorMessages['postcode']) {
+        <div class="alert alert-danger">{{errorMessages['postcode']}}</div>
+        }
         <label for="postcode">Postcode</label>
         <input type="text" id="postcode" placeholder="Postcode" formControlName="postcode">
       </div>
       <div class="form-group">
+        @if (errorMessages['city']) {
+        <div class="alert alert-danger">{{errorMessages['city']}}</div>
+        }
         <label for="city">City</label>
         <input type="text" id="city" placeholder="City" formControlName="city">
       </div>
       <div class="form-group">
+        @if (errorMessages['phone']) {
+        <div class="alert alert-danger">{{errorMessages['phone']}}</div>
+        }
         <label for="phone">Phone Number</label>
         <input type="text" id="phone" placeholder="Phone Number" formControlName="phone">
       </div>
diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
index 343e285..7dfaaef 100644
--- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
+++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
@@ -7,7 +7,6 @@ import { AsyncPipe, NgFor } from '@angular/common';
 import { SkillService } from '../../service/skill.service';
 import { QualificationGetDTO } from '../../models/skill';
 import { Observable, of } from 'rxjs';
-import { EmployeeService } from '../../service/employee.service';
 
 @Component({
   selector: 'app-mitarbeiter-form',
@@ -23,8 +22,9 @@ export class MitarbeiterFormComponent {
   public mitarbeiterForm!: FormGroup;
   public allSkills: Observable<Array<QualificationGetDTO>> = of([]);
   public hasAllSkills: boolean = false;
+  errorMessages: Record<string, string> = {};
 
-  constructor(public http: HttpClient, public router: Router, private employeeService: EmployeeService, private skillService: SkillService) {
+  constructor(public http: HttpClient, public router: Router, private skillService: SkillService) {
 
   }
 
@@ -33,14 +33,13 @@ export class MitarbeiterFormComponent {
   }
 
   private setupForm() {
-
     this.mitarbeiterForm = new FormGroup({
-      lastName: new FormControl(this.mitarbeiter.lastName),
-      firstName: new FormControl(this.mitarbeiter.firstName),
-      street: new FormControl(this.mitarbeiter.street),
-      postcode: new FormControl(this.mitarbeiter.postcode),
-      city: new FormControl(this.mitarbeiter.city),
-      phone: new FormControl(this.mitarbeiter.phone),
+      lastName: new FormControl(this.mitarbeiter.lastName, Validators.required),
+      firstName: new FormControl(this.mitarbeiter.firstName, Validators.required),
+      street: new FormControl(this.mitarbeiter.street, Validators.required),
+      postcode: new FormControl(this.mitarbeiter.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]),
+      city: new FormControl(this.mitarbeiter.city, Validators.required),
+      phone: new FormControl(this.mitarbeiter.phone, [Validators.required, Validators.pattern('^[- +()0-9]+$')]),
       newSkill: new FormControl(),
     });
   }
@@ -92,7 +91,38 @@ export class MitarbeiterFormComponent {
     });
   }
 
+  private validationErrorMessages: Record<string, string> = {
+    required: "This field is required",
+    minlength: "The value is too short",
+    maxlength: "The value is too long",
+    pattern: "This field must be a valid phone number",
+  };
+
+  updateErrorMessages(): void {
+    console.log("updateErrorMessages");
+    this.errorMessages = {};
+
+    Object.keys(this.mitarbeiterForm.controls).forEach(field => {
+      const control = this.mitarbeiterForm.get(field);
+
+      if (control && control.errors && control.touched) {
+        this.errorMessages[field] = Object.keys(control.errors)
+          .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
+          .join(' ');
+      }
+    });
+
+    console.log(this.errorMessages);
+  }
+
+
   submit() {
+    this.updateErrorMessages();
+    if (!this.mitarbeiterForm.valid) {
+      console.log(this.mitarbeiterForm.valid);
+      return;
+    }
+
     this.mitarbeiter.firstName = this.mitarbeiterForm.get("firstName")?.value;
     this.mitarbeiter.lastName = this.mitarbeiterForm.get("lastName")?.value;
     this.mitarbeiter.street = this.mitarbeiterForm.get("street")?.value;