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.html

@@ -7,12 +7,14 @@
           <mat-label>First Name</mat-label>
           <input matInput formControlName="firstName" required>
           <mat-hint>Enter the first name</mat-hint>
+          <mat-error *ngIf="errors['firstName']">{{errors['firstName']}}</mat-error>
         </mat-form-field>
 
         <mat-form-field class="!w-full">
           <mat-label>Last Name</mat-label>
           <input matInput formControlName="lastName" required>
           <mat-hint>Enter the last name</mat-hint>
+          <mat-error *ngIf="errors['lastName']">{{errors['lastName']}}</mat-error>
         </mat-form-field>
       </div>
 
@@ -20,6 +22,7 @@
         <mat-label>Street</mat-label>
         <input matInput formControlName="street" required>
         <mat-hint>Enter the street address</mat-hint>
+        <mat-error *ngIf="errors['street']">{{errors['street']}}</mat-error>
       </mat-form-field>
 
       <div class="flex gap-x-4">
@@ -27,12 +30,14 @@
           <mat-label>City</mat-label>
           <input matInput formControlName="city" required>
           <mat-hint>Enter the city</mat-hint>
+          <mat-error *ngIf="errors['city']">{{errors['city']}}</mat-error>
         </mat-form-field>
 
         <mat-form-field class="!w-1/2">
           <mat-label>Postcode</mat-label>
           <input matInput formControlName="postcode" minlength="5" maxlength="5" type="number" required>
           <mat-hint>Enter postcode</mat-hint>
+          <mat-error *ngIf="errors['postcode']">{{errors['postcode']}}</mat-error>
         </mat-form-field>
       </div>
 
@@ -40,6 +45,7 @@
         <mat-label>Phone</mat-label>
         <input matInput formControlName="phone" required>
         <mat-hint>Enter phone number</mat-hint>
+        <mat-error *ngIf="errors['phone']">{{errors['phone']}}</mat-error>
       </mat-form-field>
 
       <mat-form-field class="!w-full">
@@ -50,6 +56,7 @@
           </mat-option>
         </mat-select>
         <mat-hint>Select qualifications</mat-hint>
+        <mat-error *ngIf="errors['qualifications']">{{errors['qualifications']}}</mat-error>
       </mat-form-field>
 
       <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">

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;
+  }
 }