diff --git a/src/app/employee/create/create.component.html b/src/app/employee/create/create.component.html
index 454b94c..a882ad2 100644
--- a/src/app/employee/create/create.component.html
+++ b/src/app/employee/create/create.component.html
@@ -6,34 +6,40 @@
First Name
+ {{errors['firstName']}}
Last Name
+ {{errors['lastName']}}
Street
+ {{errors['street']}}
City
+ {{errors['city']}}
Postcode
+ {{errors['postcode']}}
Phone
+ {{errors['phone']}}
@@ -43,6 +49,7 @@
{{qualification.skill}}
+ {{errors['qualifications']}}
diff --git a/src/app/employee/create/create.component.ts b/src/app/employee/create/create.component.ts
index 6cbc5ed..0d5dbe7 100644
--- a/src/app/employee/create/create.component.ts
+++ b/src/app/employee/create/create.component.ts
@@ -1,7 +1,7 @@
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 {MatFormField, MatLabel} from "@angular/material/form-field";
-import {MatInput} from "@angular/material/input";
+import {MatError, MatInput} from "@angular/material/input";
import {MatButton} from "@angular/material/button";
import {
MatDialogActions,
@@ -17,35 +17,48 @@ import {MatOption} from "@angular/material/core";
import {MatSelect} from "@angular/material/select";
import QualificationService from "../../services/qualification.service";
import {Qualification} from "../../qualification/Qualification";
+import {debounceTime} from "rxjs";
@Component({
selector: 'app-create-employee',
- imports: [
- ReactiveFormsModule,
- MatFormField,
- MatInput,
- MatButton,
- MatLabel,
- MatDialogContent,
- MatDialogTitle,
- MatDialogActions,
- MatDialogClose,
- NgIf,
- MatOption,
- MatSelect,
- NgForOf,
- ],
+ imports: [
+ ReactiveFormsModule,
+ MatFormField,
+ MatInput,
+ MatButton,
+ MatLabel,
+ MatDialogContent,
+ MatDialogTitle,
+ MatDialogActions,
+ MatDialogClose,
+ NgIf,
+ MatOption,
+ MatSelect,
+ NgForOf,
+ MatError,
+ ],
templateUrl: './create.component.html',
standalone: true,
styleUrl: './create.component.css'
})
export class CreateComponent implements OnInit {
- employeeForm: FormGroup | null = null;
+ employeeForm!: FormGroup;
employeeService: EmployeeApiService = inject(EmployeeApiService);
formBuilder: FormBuilder = inject(FormBuilder);
dialogRef: MatDialogRef = inject(MatDialogRef);
qualificationService: QualificationService = inject(QualificationService);
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();
@@ -53,11 +66,18 @@ export class CreateComponent implements OnInit {
firstName: ['', Validators.required],
lastName: ['', Validators.required],
street: ['', Validators.required],
- postcode: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(5)]],
+ postcode: ['', [Validators.required, this.validatePostcode]],
city: ['', Validators.required],
phone: ['', Validators.required],
qualifications: [[]]
});
+
+ 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() {
@@ -67,8 +87,7 @@ export class CreateComponent implements OnInit {
}
submit() {
- if (this.employeeForm === null || !this.employeeForm.valid) {
- console.error('Form invalid');
+ if (!this.employeeForm.valid) {
return;
}
@@ -81,4 +100,19 @@ export class CreateComponent implements OnInit {
this.employeeService.create(employeeData as Employee).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;
+ }
}