jank/employeeService
Archived
1
1
Fork 0
Code Issues 2 Pull requests 4 Projects 1 Releases Packages Wiki Activity Actions

feat(mitarbeiter-form): add validation error messages display

Browse source
This commit is contained in:
Jan K9f 2025-01-15 12:24:39 +01:00
commit 3b8ed21b27
Signed by: jank
GPG key ID: 50620ADD22CD330B
2 changed files with 57 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/components/mitarbeiter-form/mitarbeiter-form.component.html
View file

@ -4,26 +4,44 @@
<button (click)="returnToEmployeeOverview()" class="back-button">Back</button>
<div class="user-info">
<div class="form-group">
@if (errorMessages['firstName']) {
<div class="alert alert-danger">{{errorMessages['firstName']}}</div>
}
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="First Name" formControlName="firstName">
</div>
<div class="form-group">
@if (errorMessages['lastName']) {
<div class="alert alert-danger">{{errorMessages['lastName']}}</div>
}
<label for="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Last Name" formControlName="lastName">
</div>
<div class="form-group">
@if (errorMessages['street']) {
<div class="alert alert-danger">{{errorMessages['street']}}</div>
}
<label for="street">Street</label>
<input type="text" id="street" placeholder="Street" formControlName="street">
</div>
<div class="form-group">
@if (errorMessages['postcode']) {
<div class="alert alert-danger">{{errorMessages['postcode']}}</div>
}
<label for="postcode">Postcode</label>
<input type="text" id="postcode" placeholder="Postcode" formControlName="postcode">
</div>
<div class="form-group">
@if (errorMessages['city']) {
<div class="alert alert-danger">{{errorMessages['city']}}</div>
}
<label for="city">City</label>
<input type="text" id="city" placeholder="City" formControlName="city">
</div>
<div class="form-group">
@if (errorMessages['phone']) {
<div class="alert alert-danger">{{errorMessages['phone']}}</div>
}
<label for="phone">Phone Number</label>
<input type="text" id="phone" placeholder="Phone Number" formControlName="phone">
</div>

48
src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
View file

@ -7,7 +7,6 @@ import { AsyncPipe, NgFor } from '@angular/common';
import { SkillService } from '../../service/skill.service';
import { QualificationGetDTO } from '../../models/skill';
import { Observable, of } from 'rxjs';
import { EmployeeService } from '../../service/employee.service';
@Component({
selector: 'app-mitarbeiter-form',
@ -23,8 +22,9 @@ export class MitarbeiterFormComponent {
public mitarbeiterForm!: FormGroup;
public allSkills: Observable<Array<QualificationGetDTO>> = of([]);
public hasAllSkills: boolean = false;
errorMessages: Record<string, string> = {};
constructor(public http: HttpClient, public router: Router, private employeeService: EmployeeService, private skillService: SkillService) {
constructor(public http: HttpClient, public router: Router, private skillService: SkillService) {
}
@ -33,14 +33,13 @@ export class MitarbeiterFormComponent {
}
private setupForm() {
this.mitarbeiterForm = new FormGroup({
lastName: new FormControl(this.mitarbeiter.lastName),
firstName: new FormControl(this.mitarbeiter.firstName),
street: new FormControl(this.mitarbeiter.street),
postcode: new FormControl(this.mitarbeiter.postcode),
city: new FormControl(this.mitarbeiter.city),
phone: new FormControl(this.mitarbeiter.phone),
lastName: new FormControl(this.mitarbeiter.lastName, Validators.required),
firstName: new FormControl(this.mitarbeiter.firstName, Validators.required),
street: new FormControl(this.mitarbeiter.street, Validators.required),
postcode: new FormControl(this.mitarbeiter.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]),
city: new FormControl(this.mitarbeiter.city, Validators.required),
phone: new FormControl(this.mitarbeiter.phone, [Validators.required, Validators.pattern('^[- +()0-9]+$')]),
newSkill: new FormControl(),
});
}
@ -92,7 +91,38 @@ export class MitarbeiterFormComponent {
});
}
private validationErrorMessages: Record<string, string> = {
required: "This field is required",
minlength: "The value is too short",
maxlength: "The value is too long",
pattern: "This field must be a valid phone number",
};
updateErrorMessages(): void {
console.log("updateErrorMessages");
this.errorMessages = {};
Object.keys(this.mitarbeiterForm.controls).forEach(field => {
const control = this.mitarbeiterForm.get(field);
if (control && control.errors && control.touched) {
this.errorMessages[field] = Object.keys(control.errors)
.map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
.join(' ');
}
});
console.log(this.errorMessages);
}
submit() {
this.updateErrorMessages();
if (!this.mitarbeiterForm.valid) {
console.log(this.mitarbeiterForm.valid);
return;
}
this.mitarbeiter.firstName = this.mitarbeiterForm.get("firstName")?.value;
this.mitarbeiter.lastName = this.mitarbeiterForm.get("lastName")?.value;
this.mitarbeiter.street = this.mitarbeiterForm.get("street")?.value;