jank/angular-hotel-manager
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

end of workshop

Browse Source
This commit is contained in:
Jan Gleytenhoover 2025-01-14 10:05:15 +01:00
parent b284872fca
commit 69d26e89b7
Signed by: jank
GPG Key ID: 50620ADD22CD330B
3 changed files with 60 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/crossValidator.service.ts
View File

@ -19,4 +19,16 @@ export class CrossValidator {
return error;
};
}
public crossValidate() {
return (control: AbstractControl): ValidationErrors | null => {
if (!(control instanceof FormGroup)) {
return null;
}
const contactType = control.get('contactType')?.value;
if (contactType == "None") return null;
}
}
}

45
src/app/new-hotel/new-hotel.component.html
View File

@ -5,24 +5,55 @@
<label for="name">Name</label>
<div class="text-red-500" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
<input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name" formControlName="name">
<input type="text" class="border-red-500"
[class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name"
formControlName="name">
<label for="description">Description</label>
<div class="text-red-500" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
<input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description" formControlName="description">
<input type="text" class="border-red-500"
[class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description"
formControlName="description">
<label for="imageUrl">Image</label>
<div class="text-red-500" *ngIf="errorMessages['imageUrl']">{{ errorMessages['imageUrl'] }}</div>
<input type="url" class="border-red-500" [class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl" formControlName="imageUrl">
<input type="url" class="border-red-500"
[class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl"
formControlName="imageUrl">
<label for="price">Price</label>
<div class="text-red-500" *ngIf="errorMessages['price']">{{ errorMessages['price'] }}</div>
<input type="number" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
<input type="number" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price"
formControlName="price">
<label for="rating">Rating</label>
<div class="text-red-500" *ngIf="errorMessages['rating']">{{ errorMessages['rating'] }}</div>
<input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating" formControlName="rating">
<input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating"
formControlName="rating">
<button class="submit-button" (click)="addTag()">Add Tag</button>
@for (tag of getTags().controls; track tag) {
<input type="tag" class="border-red-500" [class.border-8]='hotelForm.get("tag")?.invalid' id="tag" formControlName="tag">
<button (click)="deleteTag(tag)" class="delete-button">delete</button>
<input type="tag" class="border-red-500" [class.border-8]='hotelForm.get("tag")?.invalid' id="tag"
formControlName="tag">
<button (click)="deleteTag(tag)" class="delete-button">delete</button>
}
<input type="radio" value='None' formControlName="contactType">None
<input type="radio" value='Email' formControlName="contactType">Email
<input type="radio" value='SMS' formControlName="contactType">SMS
@if (hotelForm.get("contactType")?.value == "Email") {
<div class="mt-3">
<label for="email">Email</label>
<input type="email" formControlName="email" id="email">
<label for="emailConfirmation">Email Confirmation</label>
<input type="email" formControlName="emailConfirmation" id="emailConfirmation">
</div>
}
@if (hotelForm.get("contactType")?.value == "SMS") {
<div class="mt-3">
<label for="phone">Phone Number</label>
<input type="tel" formControlName="phone" id="phone">
<label for="phoneConfirmation">Phone Number Confirmation</label>
<input type="tel" formControlName="phoneConfirmation" id="phoneConfirmation">
</div>
}
<button class="submit-button" (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
<a routerLink="/" class="delete-button">Cancel</a>
</form>

10
src/app/new-hotel/new-hotel.component.ts
View File

@ -67,10 +67,20 @@ export class NewHotelComponent {
price: new FormControl(0, Validators.required),
imageUrl: new FormControl("", Validators.required),
rating: new FormControl(0, Validators.required),
contactType: new FormControl('None'),
email: new FormControl(''),
emailConfirmation: new FormControl(''),
phone: new FormControl(''),
phoneConfirmation: new FormControl(''),
tags: new FormArray(tags)
}, { validators: new CrossValidator().onlyAllowNameAndDescriptionSame() })
this.hotelForm.valueChanges.subscribe(() => this.updateErrorMessages());
this.hotelForm.valueChanges.subscribe(() => this.formUpdated());
}
formUpdated() {
console.log(this.hotelForm.get("contactType")?.value);
}
getTags() {