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; + } }