Works somehow a little bit idk 💀

package.json

@@ -10,23 +10,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.3",
+    "@angular/animations": "^19.0.0",
-    "@angular/common": "^18.2.3",
+    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^18.2.3",
+    "@angular/compiler": "^19.0.0",
-    "@angular/core": "^18.2.3",
+    "@angular/core": "^19.0.0",
-    "@angular/forms": "^18.2.3",
+    "@angular/forms": "^19.0.0",
-    "@angular/platform-browser": "^18.2.3",
+    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^18.2.3",
+    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/router": "^18.2.3",
+    "@angular/router": "^19.0.0",
     "angular-in-memory-web-api": "^0.18.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.3",
+    "@angular-devkit/build-angular": "^19.0.2",
-    "@angular/cli": "^18.2.3",
+    "@angular/cli": "^19.0.2",
-    "@angular/compiler-cli": "^18.2.3",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.1.0",

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

@@ -1,12 +1,18 @@
 <p>hotel-form works!</p>
-
+<h1>{{errorMsg}}</h1>
 <form [formGroup]="hotelForm">
   <label for="name">Name</label>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid' id="name" formControlName="name">
+  <div class="text-red" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
+  <input type="text" class="border-red-500" id="name" formControlName="name">
   <label for="description">Description</label>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid' id="description" formControlName="description">
+  <div class="text-red" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
+  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid' id="description"
+    formControlName="description">
   <label for="price">Price</label>
-  <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid && hotelForm.get("price")?.touched' 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 && hotelForm.get("price")?.touched' id="price"
+    formControlName="price">
   <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
   <a routerLink="/">Cancel</a>
 </form>

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

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Hotel } from '../HotelItem/hotel';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AbstractControl, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgFor, NgIf } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Router, RouterLink } from '@angular/router';
@@ -15,17 +15,60 @@ import { Router, RouterLink } from '@angular/router';
 export class HotelFormComponent {
   @Input() public hotel!: Hotel;
   public hotelForm!: FormGroup
+  public errorMsg: string = 'testing';
+  errorMessages: Record<string, string> = {};
 
   constructor(public http: HttpClient, public router: Router) {
 
   }
 
+  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"
+  };
+
+  setMessage(value: AbstractControl): void {
+    if ((value.touched || value.dirty) && value.errors) {
+      this.errorMsg = Object.keys(value.errors).map(key => {
+        console.log(this.validationErrorMessages[key]);
+        return this.validationErrorMessages[key] || `Unknown error: ${key}`;
+      }).join(' ');
+
+      console.log(this.errorMsg);
+    }
+    console.log(this.errorMsg);
+  }
+
+  updateErrorMessages(): void {
+    this.errorMessages = {};
+
+    Object.keys(this.hotelForm.controls).forEach(field => {
+      const control = this.hotelForm.get(field);
+
+      if (control && control.errors) {
+        this.errorMessages[field] = Object.keys(control.errors)
+          .map(errorKey => this.validationErrorMessages[errorKey] || `Unknown error: ${errorKey}`)
+          .join(' ');
+      }
+    });
+
+    console.log(this.errorMessages);
+  }
+
   ngOnInit(): void {
     this.hotelForm = new FormGroup({
       name: new FormControl(this.hotel.hotelName, Validators.required),
       description: new FormControl(this.hotel.description, Validators.required),
       price: new FormControl(this.hotel.price, Validators.required),
-    })
+    });
+
+    // this.hotelForm.valueChanges.subscribe(data => this.setMessage(this.hotelForm.get("name")!));
+    // this.hotelForm.valueChanges.subscribe(data => this.setMessage(this.hotelForm.get("description")!));
+    // this.hotelForm.valueChanges.subscribe(data => this.setMessage(this.hotelForm.get("price")!));
+    //
+    this.hotelForm.valueChanges.subscribe(() => this.updateErrorMessages());
   }
 
   submit(): void {

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

@@ -11,6 +11,11 @@
   <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
   <label for="rating">Rating</label>
   <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) {
+    <input type="tag" class="border-red-500" [class.border-8]='hotelForm.get("tag")?.invalid' id="tag" formControlName="tag">
+    <button (click)="deleteTag(tag)">delete</button>
+  }
   <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
   <a routerLink="/">Cancel</a>
 </form>

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

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { Hotel } from '../HotelItem/hotel';
 import { NgFor, NgIf } from '@angular/common';
@@ -17,15 +17,36 @@ export class NewHotelComponent {
   public hotel!: Hotel
 
   ngOnInit(): void {
+    const tags = [];
+
+    for (const tag of this.hotel?.tags ?? []) {
+      tags.push(new FormControl(tag, [Validators.required]));
+    }
+
+
     this.hotelForm = new FormGroup({
       name: new FormControl("", Validators.required),
       description: new FormControl("", Validators.required),
       price: new FormControl(0, Validators.required),
       imageUrl: new FormControl("", Validators.required),
       rating: new FormControl(0, Validators.required),
+      tags: new FormArray(tags)
     })
   }
 
+  getTags() {
+    return this.hotelForm.controls['tags'] as FormArray;
+  }
+
+  deleteTag(tagElement: AbstractControl) {
+    this.getTags().removeAt(this.getTags().controls.indexOf(tagElement));
+  }
+
+
+  addTag() {
+    this.getTags().push(new FormControl('', [Validators.required]));
+  }
+
   constructor(public http: HttpClient, public router: Router) {
 
   }
@@ -39,7 +60,7 @@ export class NewHotelComponent {
       price: this.hotelForm.get("price")?.value,
       imageUrl: this.hotelForm.get("imageUrl")?.value,
       rating: this.hotelForm.get("rating")?.value,
-      tags: []
+      tags: this.hotelForm.get("tags")?.value
     }
     this.http.post("/api/hotels/", hotel).subscribe();
     this.router.navigate(["/"]);