bugfix

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

@@ -1,11 +1,12 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {
   AbstractControl,
   FormArray,
   FormControl,
   FormGroup,
   FormsModule,
-  ReactiveFormsModule, ValidationErrors,
+  ReactiveFormsModule,
+  ValidationErrors,
   Validators
 } from "@angular/forms";
 import {Hotel} from "../model/hotel";
@@ -30,22 +31,22 @@ import {ErrorMsgComponent} from "./error-msg.component";
       <label for="name">Name</label>
       <br>
       <input id="name" type="text" formControlName="name">
-      <app-error-msg [msg]="errorMsgs['name']" />
+      <app-error-msg [msg]="errorMsgs['name']"/>
       <br>
       <label for="description">Description</label>
       <br>
       <input id="description" type="text" formControlName="description">
-      <app-error-msg [msg]="errorMsgs['description']" />
+      <app-error-msg [msg]="errorMsgs['description']"/>
       <br>
       <label for="price">Price</label>
       <br>
       <input id="price" type="number" formControlName="price">
-      <app-error-msg [msg]="errorMsgs['price']" />
+      <app-error-msg [msg]="errorMsgs['price']"/>
       <br>
       <label for="rating">Rating</label>
       <br>
       <input id="rating" type="number" formControlName="rating">
-      <app-error-msg [msg]="errorMsgs['rating']" />
+      <app-error-msg [msg]="errorMsgs['rating']"/>
       <br>
       <br>
       <label for="email">Email</label>
@@ -64,30 +65,30 @@ import {ErrorMsgComponent} from "./error-msg.component";
       <br>
 
       @if (activeContact === 'email') {
-        <app-error-msg [msg]="errorMsgs['emailGroup']" />
+        <app-error-msg [msg]="errorMsgs['emailGroup']"/>
         <div formGroupName="emailGroup">
-          <app-error-msg [msg]="errorMsgs['email']" />
+          <app-error-msg [msg]="errorMsgs['email']"/>
           <br>
           <label for="email">Email</label>
           <br>
           <input type="email" formControlName="email" required>
           <br>
           <label for="emailConfirm">Confirm Email</label>
-          <app-error-msg [msg]="errorMsgs['emailConfirm']" />
+          <app-error-msg [msg]="errorMsgs['emailConfirm']"/>
           <br>
           <input type="email" formControlName="emailConfirm" required>
         </div>
       } @else if (activeContact === 'phoneNumber') {
-        <app-error-msg [msg]="errorMsgs['phoneNumberGroup']" />
+        <app-error-msg [msg]="errorMsgs['phoneNumberGroup']"/>
         <div formGroupName="phoneNumberGroup">
-          <app-error-msg [msg]="errorMsgs['phoneNumber']" />
+          <app-error-msg [msg]="errorMsgs['phoneNumber']"/>
           <br>
           <label for="phoneNumber">Phone Number</label>
           <br>
           <input type="number" formControlName="phoneNumber" required>
           <br>
           <label for="phoneNumberConfirm">Confirm Phone Number</label>
-          <app-error-msg [msg]="errorMsgs['phoneNumberConfirm']" />
+          <app-error-msg [msg]="errorMsgs['phoneNumberConfirm']"/>
           <br>
           <input type="number" formControlName="phoneNumberConfirm" required>
         </div>
@@ -101,7 +102,7 @@ import {ErrorMsgComponent} from "./error-msg.component";
           <input type="text" placeholder="tag" [formControlName]="i">
           <button (click)="deleteTag(tag)">-</button>
         </div>
-        <app-error-msg [msg]="errorMsgs['tags']" />
+        <app-error-msg [msg]="errorMsgs['tags']"/>
       </div>
       <br>
       <br>
@@ -132,6 +133,10 @@ export class EditHotelComponent implements OnInit {
 
   activeContact!: string;
 
+  phoneNumberGroup!: FormGroup;
+
+  emailGroup!: FormGroup;
+
   ngOnInit(): void {
     if (this.hotel?.email) {
       this.activeContact = 'email';
@@ -152,16 +157,16 @@ export class EditHotelComponent implements OnInit {
       description: new FormControl(this.hotel?.description, [Validators.required]),
       price: new FormControl(this.hotel?.price, [Validators.required]),
       rating: new FormControl(this.hotel?.rating, [Validators.required, Validators.min(0), Validators.max(5)]),
-      emailGroup: new FormGroup({
-        email: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
-        emailConfirm: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
-      }, {validators: this.emailMatch}),
-      phoneNumberGroup: new FormGroup({
-        phoneNumber: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
-        phoneNumberConfirm: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
-      }, {validators: this.phoneNumberMatch}),
       tags: new FormArray(tags),
-    })
+    });
+
+    this.initGroups()
+
+    if (this.hotel?.email) {
+      this.form.addControl('emailGroup', this.emailGroup);
+    } else if (this.hotel?.phoneNumber) {
+      this.form.addControl('phoneNumberGroup', this.phoneNumberGroup);
+    }
 
     Object.keys(this.form.controls).forEach(controlName => {
       let debounce = 1000;
@@ -216,8 +221,7 @@ export class EditHotelComponent implements OnInit {
   }
 
   setErrorMessage(controlName: string, control: AbstractControl) {
-    this.errorMsgs[controlName] = Object.keys(control.errors ?? {}).map ((key) => this.validationErrors[key]).join(' ');
+    this.errorMsgs[controlName] = Object.keys(control.errors ?? {}).map((key) => this.validationErrors[key]).join(' ');
-    console.log(this.errorMsgs[controlName])
   }
 
   showErrors() {
@@ -232,6 +236,12 @@ export class EditHotelComponent implements OnInit {
   }
 
   changeContactType(type: string) {
+    if (type == 'email') {
+      this.form.addControl('emailGroup', this.emailGroup);
+    } else if (type == 'phoneNumber') {
+      this.form.addControl('phoneNumberGroup', this.phoneNumberGroup);
+    }
+
     this.activeContact = type;
   }
 
@@ -264,4 +274,16 @@ export class EditHotelComponent implements OnInit {
 
     return null;
   }
+
+  private initGroups() {
+    this.emailGroup = new FormGroup({
+      email: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
+      emailConfirm: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
+    }, {validators: this.emailMatch});
+
+    this.phoneNumberGroup = new FormGroup({
+      phoneNumber: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
+      phoneNumberConfirm: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
+    }, {validators: this.phoneNumberMatch});
+  }
 }

src/app/hotel/component/hotels.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from "@angular/core";
+import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
 import {HotelComponent} from "./hotel.component";
 import {Hotel} from "../model/hotel";
 import {FormsModule} from "@angular/forms";
@@ -32,7 +32,8 @@ import {StarComponent} from "./star.component";
   `,
   imports: [FormsModule, HotelComponent, AsyncPipe, CurrencyComponent, RouterLink, StarComponent, NgIf],
   providers: [HotelService],
-  selector: 'app-hotels'
+  selector: 'app-hotels',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HotelsComponent {
 

src/app/hotel/service/hotel.service.ts

@@ -1,6 +1,6 @@
 import {HttpClient} from "@angular/common/http";
 import {inject, Injectable} from "@angular/core";
-import {Observable} from "rxjs";
+import {Observable, shareReplay} from "rxjs";
 import {Hotel} from "../model/hotel";
 
 @Injectable({
@@ -10,11 +10,11 @@ export class HotelService {
   private httpClient: HttpClient = inject(HttpClient);
 
   public getHotels(): Observable<Hotel[]> {
-    return this.httpClient.get<Hotel[]>('/api/hotels');
+    return this.httpClient.get<Hotel[]>('/api/hotels').pipe(shareReplay());
   }
 
   public getHotelById(id: number): Observable<Hotel> {
-    return this.httpClient.get<Hotel>(`/api/hotels/${id}`);
+    return this.httpClient.get<Hotel>(`/api/hotels/${id}`).pipe(shareReplay());
   }
 
   public updateHotelById(hotel: Hotel): Observable<Object> {