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

@@ -46,6 +46,20 @@
       <div *ngIf="form.get('rating')?.errors?.['max']">Hotel Rating cannot be more than 5.</div>
     </div>
   </div>
+  <div class="form-group">
+    <label for="hotelTags" class="block text-sm font-medium text-gray-700">Hotel Tags</label>
+    <div formArrayName="tags">
+      <div *ngFor="let tag of tags.controls; let i=index" class="flex items-center space-x-2">
+        <input type="text" [formControlName]="i"
+          class="form-control mt-1 w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
+          [id]="'hotelTag' + i" placeholder="Enter hotel tag">
+        <button mat-icon-button (click)="tags.removeAt(i)" class="mt-1">
+          <mat-icon class="text-red-500">delete</mat-icon>
+        </button>
+      </div>
+      <button type="button" mat-stroked-button (click)="addTag()" class="mt-2">Add Tag</button>
+    </div>
+  </div>
   <div class="flex justify-between">
     <div class="flex space-x-1">
       <button type="submit" mat-flat-button (click)="submit()">Submit</button>

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

@@ -1,12 +1,13 @@
 import { Component, inject, Inject, Input } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Hotel } from "../HotelItem/hotel";
 import { HttpClient } from '@angular/common/http';
 import { catchError } from "rxjs";
 import { Router, RouterLink } from "@angular/router";
-import { NgIf } from "@angular/common";
+import { NgFor, NgIf } from "@angular/common";
 import { MatButtonModule } from "@angular/material/button";
 import { MatIconModule } from "@angular/material/icon";
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-hotel-form',
@@ -16,7 +17,9 @@ import { MatIconModule } from "@angular/material/icon";
     RouterLink,
     NgIf,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    NgFor,
+    FormsModule
   ],
   templateUrl: './hotel-form.component.html',
   styleUrl: './hotel-form.component.css'
@@ -36,7 +39,8 @@ export class HotelFormComponent {
       name: new FormControl(this.hotel?.hotelName || '', [Validators.minLength(3), Validators.required]),
       description: new FormControl(this.hotel?.description || '', [Validators.minLength(3), Validators.required]),
       price: new FormControl(this.hotel?.price || '', [Validators.min(0), Validators.required]),
-      rating: new FormControl(this.hotel?.rating || '', [Validators.min(0), Validators.max(5), Validators.required])
+      rating: new FormControl(this.hotel?.rating || '', [Validators.min(0), Validators.max(5), Validators.required]),
+      tags: new FormArray(this.hotel?.tags?.map(tag => new FormControl(tag)) || [])
     });
   }
 
@@ -53,6 +57,14 @@ export class HotelFormComponent {
     this.router.navigate(['/']);
   }
 
+  get tags() {
+    return this.form.get('tags') as FormArray;
+  }
+
+  public addTag() {
+    this.tags.push(new FormControl(''));
+  }
+
   public submit() {
     if (this.form.valid) {
       const hotelData: Hotel = {
@@ -62,7 +74,7 @@ export class HotelFormComponent {
         price: this.form.value.price,
         rating: this.form.value.rating,
         imageUrl: this.hotel?.imageUrl || 'https://placehold.co/2000x1050/EEE/31343C',
-        tags: this.hotel?.tags || []
+        tags: this.form.value.tags || []
       };
 
       if (this.hotel) {