diff --git a/src/app/employee/edit/edit.component.html b/src/app/employee/edit/edit.component.html
index 6e13586..3226dad 100644
--- a/src/app/employee/edit/edit.component.html
+++ b/src/app/employee/edit/edit.component.html
@@ -7,12 +7,14 @@
First Name
Enter the first name
+ {{errors['firstName']}}
Last Name
Enter the last name
+ {{errors['lastName']}}
@@ -20,6 +22,7 @@
Street
Enter the street address
+ {{errors['street']}}
@@ -27,12 +30,14 @@
City
Enter the city
+ {{errors['city']}}
Postcode
Enter postcode
+ {{errors['postcode']}}
@@ -40,6 +45,7 @@
Phone
Enter phone number
+ {{errors['phone']}}
@@ -50,16 +56,17 @@
Select qualifications
+ {{errors['qualifications']}}
-
Cancel
-
Submit
diff --git a/src/app/employee/edit/edit.component.ts b/src/app/employee/edit/edit.component.ts
index 91b8421..d67beee 100644
--- a/src/app/employee/edit/edit.component.ts
+++ b/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 = 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;
+ }
}