angular/workshop
angular/workshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Constantin Simonis 2025-01-14 09:43:36 +01:00
parent 1ed9186912
commit 767df7f2ea
Signed by: csimonis
GPG Key ID: 758DD9C506603183
1 changed files with 77 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/app/hotel/component/edit-hotel.component.ts
View File

@ -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>
<br>
<app-error-msg [msg]="errorMsgs['emailGroup']"></app-error-msg>
<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>
<br>
<app-error-msg [msg]="errorMsgs['phoneNumberGroup']"></app-error-msg>
<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;
}
}