diff --git a/src/app/hotel/component/edit-hotel.component.ts b/src/app/hotel/component/edit-hotel.component.ts
index b278c2a..93586ce 100644
--- a/src/app/hotel/component/edit-hotel.component.ts
+++ b/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";
-
+
-
+
-
+
@if (activeContact === 'email') {
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
} @else if (activeContact === 'phoneNumber') {
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
}
@@ -118,7 +125,9 @@ export class EditHotelComponent implements OnInit {
validationErrors: Record = {
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)]),
- email: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
- emailConfirm: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
- 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)]),
+ 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;
+ }
}