jank/angular-hotel-manager
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Works as intended

Browse Source
This commit is contained in:
Jan Gleytenhoover 2025-01-07 08:55:06 +01:00
parent 5b1b5b3497
commit fe3b957a47
Signed by: jank
GPG Key ID: B267751B8AE29EFE
3 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/hotel-form/hotel-form.component.ts
View File

@ -36,9 +36,7 @@ export class HotelFormComponent {
return this.validationErrorMessages[key] || `Unknown error: ${key}`;
}).join(' ');
console.log(this.errorMsg);
}
console.log(this.errorMsg);
}
updateErrorMessages(): void {
@ -53,8 +51,6 @@ export class HotelFormComponent {
.join(' ');
}
});
console.log(this.errorMessages);
}
ngOnInit(): void {

7
src/app/new-hotel/new-hotel.component.html
View File

@ -2,14 +2,19 @@
<form [formGroup]="hotelForm">
<label for="name">Name</label>
<div class="text-red" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
<input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name" formControlName="name">
<label for="description">Description</label>
<div class="text-red" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
<input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description" formControlName="description">
<label for="imageUrl">Image</label>
<div class="text-red" *ngIf="errorMessages['imageUrl']">{{ errorMessages['imageUrl'] }}</div>
<input type="url" class="border-red-500" [class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl" formControlName="imageUrl">
<label for="price">Price</label>
<input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
<div class="text-red" *ngIf="errorMessages['price']">{{ errorMessages['price'] }}</div>
<input type="number" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
<label for="rating">Rating</label>
<div class="text-red" *ngIf="errorMessages['rating']">{{ errorMessages['rating'] }}</div>
<input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating" formControlName="rating">
<button (click)="addTag()">Add Tag</button>
@for (tag of getTags().controls; track null) {

26
src/app/new-hotel/new-hotel.component.ts
View File

@ -15,6 +15,30 @@ import { NgFor, NgIf } from '@angular/common';
export class NewHotelComponent {
public hotelForm!: FormGroup
public hotel!: Hotel
errorMessages: Record<string, string> = {};
private validationErrorMessages: Record<string, string> = {
required: "This field is required",
minlength: "The value is too short",
maxlength: "The value is too long",
pattern: "The value format is incorrect"
};
updateErrorMessages(): void {
this.errorMessages = {};
Object.keys(this.hotelForm.controls).forEach(field => {
const control = this.hotelForm.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);
}
ngOnInit(): void {
const tags = [];
@ -32,6 +56,8 @@ export class NewHotelComponent {
rating: new FormControl(0, Validators.required),
tags: new FormArray(tags)
})
this.hotelForm.valueChanges.subscribe(() => this.updateErrorMessages());
}
getTags() {