Works as intended

src/app/hotel-form/hotel-form.component.ts

@@ -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 {

src/app/new-hotel/new-hotel.component.html

@@ -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) {

src/app/new-hotel/new-hotel.component.ts

@@ -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() {