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

<p>Create Hotel</p>

<form [formGroup]="hotelForm">
  <div class="text-red-500" *ngIf="errorMessages['form']">{{ errorMessages['form'] }}</div>

  <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">
  <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">
  <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">
  <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">
  <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">
  <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="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>