diff --git a/src/app/hotel-form/hotel-form.component.html b/src/app/hotel-form/hotel-form.component.html
index 7804948..93aa829 100644
--- a/src/app/hotel-form/hotel-form.component.html
+++ b/src/app/hotel-form/hotel-form.component.html
@@ -46,6 +46,20 @@
Hotel Rating cannot be more than 5.
+
diff --git a/src/app/hotel-form/hotel-form.component.ts b/src/app/hotel-form/hotel-form.component.ts
index a521159..c23ec43 100644
--- a/src/app/hotel-form/hotel-form.component.ts
+++ b/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) {