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