add errors to edit employee form (#38)

Reviewed-on: http://git.simonis.lol/angular/ems-frontend/pulls/38
Reviewed-by: Hop In, I Have Puppies AND WiFi <jleibl@noreply@simonis.lol>
Co-authored-by: Constantin Simonis <constantin@simonis.lol>
Co-committed-by: Constantin Simonis <constantin@simonis.lol>

src/app/employee/edit/edit.component.ts

@@ -1,5 +1,5 @@
 import {Component, inject, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 import {
   MAT_DIALOG_DATA,
   MatDialogActions,
@@ -10,13 +10,14 @@ import {
 } from "@angular/material/dialog";
 import {NgForOf, NgIf} from "@angular/common";
 import {MatFormField, MatHint} from "@angular/material/form-field";
-import {MatInput, MatLabel} from "@angular/material/input";
+import {MatError, MatInput, MatLabel} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
 import {Employee} from "../Employee";
 import EmployeeApiService from "../../services/employee-api.service";
 import QualificationService from "../../services/qualification.service";
 import {Qualification} from "../../qualification/Qualification";
 import {MatOption, MatSelect} from "@angular/material/select";
+import {debounceTime} from "rxjs";
 
 @Component({
   selector: 'app-edit',
@@ -34,20 +35,32 @@ import {MatOption, MatSelect} from "@angular/material/select";
     MatSelect,
     MatOption,
     NgForOf,
-    MatHint
+    MatHint,
+    MatError,
   ],
   templateUrl: './edit.component.html',
   standalone: true,
   styleUrl: './edit.component.css'
 })
 export class EditComponent implements OnInit {
-  employeeForm: FormGroup | null = null;
+  employeeForm!: FormGroup;
   formBuilder: FormBuilder = inject(FormBuilder);
   employeeService: EmployeeApiService = inject(EmployeeApiService);
   qualificationService: QualificationService = inject(QualificationService);
   dialogRef: MatDialogRef<EditComponent> = inject(MatDialogRef);
   employee: Employee = inject(MAT_DIALOG_DATA);
   qualifications: Qualification[] = [];
+  errorMsgs: { [key: string]: string } = {
+    firstName: 'First name is required',
+    lastName: 'Last name is required',
+    street: 'Street is required',
+    postcode: 'Postcode must be 5 characters long',
+    city: 'City is required',
+    phone: 'Phone is required',
+    qualifications: 'Qualifications are required'
+  }
+
+  errors: { [key: string]: string } = {}
 
   ngOnInit(): void {
     this.loadQualifications();
@@ -55,11 +68,18 @@ export class EditComponent implements OnInit {
       firstName: [this.employee.firstName, Validators.required],
       lastName: [this.employee.lastName, Validators.required],
       street: [this.employee.street, Validators.required],
-      postcode: [this.employee.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
+      postcode: [this.employee.postcode, [Validators.required, this.validatePostcode]],
       city: [this.employee.city, Validators.required],
       phone: [this.employee.phone, Validators.required],
       qualifications: [this.employee.skillSet?.map(skill => skill.id) ?? []]
     });
+
+    Object.keys(this.employeeForm.controls).forEach((controlName: string) => {
+      const control = this.employeeForm.controls[controlName];
+      control.valueChanges.pipe(debounceTime(10)).subscribe(() => {
+        this.showErrorMsg(controlName, control);
+      });
+    });
   }
 
   loadQualifications() {
@@ -88,4 +108,19 @@ export class EditComponent implements OnInit {
     this.employeeService.update(employeeData as Employee, this.employee.id).subscribe();
     this.dialogRef.close(true);
   }
+
+  showErrorMsg(controlName: string, control: AbstractControl | undefined) {
+    if (control?.errors) {
+      this.errors[controlName] = this.errorMsgs[controlName];
+    }
+  }
+
+  validatePostcode(control: AbstractControl) {
+    const postcode = control.value as number;
+    if (postcode.toString().length !== 5) {
+      return {invalidPostcode: true};
+    }
+
+    return null;
+  }
 }