refactor

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

@@ -5,7 +5,7 @@ import {
   FormControl,
   FormGroup,
   FormsModule,
-  ReactiveFormsModule,
+  ReactiveFormsModule, ValidationErrors,
   Validators
 } from "@angular/forms";
 import {Hotel} from "../model/hotel";
@@ -49,41 +49,48 @@ import {ErrorMsgComponent} from "./error-msg.component";
       <br>
       <br>
       <label for="email">Email</label>
-      <input id="email" type="checkbox" name="contactType" value="Email" [checked]="activeContact == 'email'" (click)="changeContactType('email')">
+      <input id="email" type="checkbox" name="contactType" value="Email" [checked]="activeContact == 'email'"
+             (click)="changeContactType('email')">
       <br>
       <label for="phoneNumber">Phone Number</label>
-      <input id="phoneNumber" type="checkbox" name="contactType" value="PhoneNumber" [checked]="activeContact == 'phoneNumber'" (click)="changeContactType('phoneNumber')">
+      <input id="phoneNumber" type="checkbox" name="contactType" value="PhoneNumber"
+             [checked]="activeContact == 'phoneNumber'" (click)="changeContactType('phoneNumber')">
       <br>
       <label for="none">None</label>
-      <input id="none" type="checkbox" name="contactType" value="none" [checked]="activeContact == 'none'" (click)="changeContactType('none')">
+      <input id="none" type="checkbox" name="contactType" value="none" [checked]="activeContact == 'none'"
+             (click)="changeContactType('none')">
 
       <br>
       <br>
 
       @if (activeContact === 'email') {
-        <label for="email">Email</label>
+        <app-error-msg [msg]="errorMsgs['emailGroup']"></app-error-msg>
-        <br>
+        <div formGroupName="emailGroup">
           <app-error-msg [msg]="errorMsgs['email']"></app-error-msg>
           <br>
+          <label for="email">Email</label>
+          <br>
           <input type="email" formControlName="email" required>
           <br>
           <label for="emailConfirm">Confirm Email</label>
-        <br>
           <app-error-msg [msg]="errorMsgs['emailConfirm']"></app-error-msg>
           <br>
           <input type="email" formControlName="emailConfirm" required>
+        </div>
       } @else if (activeContact === 'phoneNumber') {
-        <label for="phoneNumber">Phone Number</label>
+        <app-error-msg [msg]="errorMsgs['phoneNumberGroup']"></app-error-msg>
-        <br>
+        <div formGroupName="phoneNumberGroup">
           <app-error-msg [msg]="errorMsgs['phoneNumber']"></app-error-msg>
           <br>
+          <label for="phoneNumber">Phone Number</label>
+          <br>
           <input type="number" formControlName="phoneNumber" required>
           <br>
           <label for="phoneNumberConfirm">Confirm Phone Number</label>
-        <br>
           <app-error-msg [msg]="errorMsgs['phoneNumberConfirm']"></app-error-msg>
           <br>
           <input type="number" formControlName="phoneNumberConfirm" required>
+        </div>
       }
 
       <br>
@@ -118,7 +125,9 @@ export class EditHotelComponent implements OnInit {
   validationErrors: Record<string, string> = {
     required: 'This field is required',
     min: 'Value must be greater than or equal to 0',
-    max: 'Value must be less than or equal to 5'
+    max: 'Value must be less than or equal to 5',
+    emailMatch: 'Emails do not match',
+    phoneNumberMatch: 'Phone numbers do not match',
   };
 
   activeContact!: string;
@@ -143,10 +152,14 @@ 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),
     })
 
@@ -162,6 +175,7 @@ export class EditHotelComponent implements OnInit {
       }
 
       control?.valueChanges?.pipe(debounceTime(debounce)).subscribe(() => {
+        console.log(controlName, control)
         this.setErrorMessage(controlName, control)
       });
     });
@@ -173,21 +187,6 @@ export class EditHotelComponent implements OnInit {
       return;
     }
 
-    switch (this.activeContact) {
-      case 'email':
-        if (this.form.value.email !== this.form.value.emailConfirm) {
-          this.errorMsgs['email'] = 'Emails do not match';
-          return;
-        }
-        break;
-      case 'phoneNumber':
-        if (this.form.value.phoneNumber !== this.form.value.phoneNumberConfirm) {
-          this.errorMsgs['phoneNumber'] = 'Phone numbers do not match';
-          return;
-        }
-        break;
-    }
-
     const hotel: Hotel = {
       imageUrl: this.hotel?.imageUrl ?? "",
       hotelName: this.form.value.name,
@@ -219,9 +218,10 @@ 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])
   }
 
-  private showErrors() {
+  showErrors() {
     Object.keys(this.form.controls).forEach(controlName => {
       const control = this.form.get(controlName);
       if (!control) {
@@ -235,4 +235,34 @@ export class EditHotelComponent implements OnInit {
   changeContactType(type: string) {
     this.activeContact = type;
   }
+
+  emailMatch(control: AbstractControl): ValidationErrors | null {
+    const email = control.get('email');
+    const emailConfirm = control.get('emailConfirm');
+
+    if (!emailConfirm || !email) {
+      return null;
+    }
+
+    if (email.value !== emailConfirm.value) {
+      return {emailMatch: true};
+    }
+
+    return null;
+  }
+
+  phoneNumberMatch(control: AbstractControl) {
+    const phoneNumber = control.get('phoneNumber');
+    const phoneNumberConfirm = control.get('phoneNumberConfirm');
+
+    if (!phoneNumberConfirm || !phoneNumber) {
+      return null;
+    }
+
+    if (phoneNumber.value !== phoneNumberConfirm.value) {
+      return {phoneNumberMatch: true};
+    }
+
+    return null;
+  }
 }