angular-hotel-manager/src/app/hotel-form/hotel-form.component.html

47 lines
1.2 KiB
HTML

<p>hotel-form works!</p>
<h1>{{ errorMsg }}</h1>
<form [formGroup]="hotelForm">
<label for="name">Name</label>
<div class="text-red-500 text-5xl font-bold" *ngIf="errorMessages['name']">
{{ errorMessages["name"] }}
</div>
<input
type="text"
class="border-red-500 text-3xl border-3 rounded-full bg-gray-500 font-bold p-3 m-3 border-8"
id="name"
formControlName="name"
/>
<label for="description">Description</label>
<div class="text-red" *ngIf="errorMessages['description']">
{{ errorMessages["description"] }}
</div>
<input
type="text"
class="input-field"
[class.border-8]="hotelForm.get('description')?.invalid"
id="description"
formControlName="description"
/>
<label for="price">Price</label>
<div class="text-red" *ngIf="errorMessages['price']">
{{ errorMessages["price"] }}
</div>
<input
type="number"
class="input-field"
[class.border-8]="
hotelForm.get('price')?.invalid && hotelForm.get('price')?.touched
"
id="price"
formControlName="price"
/>
<button
class="submit-button"
(click)="submit()"
[disabled]="!hotelForm.valid"
type="submit"
>
😃 Submit
</button>
<a class="back-button" routerLink="/">😭 Cancel</a>
</form>