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";
@@ -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;
@@ -217,7 +222,6 @@ export class EditHotelComponent implements OnInit {
 
   setErrorMessage(controlName: string, control: AbstractControl) {
     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> {