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

<form class="space-y-4 max-w-md mx-auto mt-4" [formGroup]="form">
  <div class="form-group">
    <label for="hotelName" class="block text-sm font-medium text-gray-700">Hotel Name</label>
    <input type="text" formControlName="name"
      class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
      id="hotelName" placeholder="Enter hotel name">
    <div *ngIf="form.get('name')?.invalid && (form.get('name')?.dirty || form.get('name')?.touched)"
      class="text-red-500 text-sm mt-1">
      <div *ngIf="form.get('name')?.errors?.['required']">Hotel Name is required.</div>
      <div *ngIf="form.get('name')?.errors?.['minlength']">Hotel Name must be at least 3 characters long.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="hotelDescription" class="block text-sm font-medium text-gray-700">Hotel Description</label>
    <input type="text" formControlName="description"
      class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
      id="hotelDescription" placeholder="Enter hotel description">
    <div
      *ngIf="form.get('description')?.invalid && (form.get('description')?.dirty || form.get('description')?.touched)"
      class="text-red-500 text-sm mt-1">
      <div *ngIf="form.get('description')?.errors?.['required']">Hotel Description is required.</div>
      <div *ngIf="form.get('description')?.errors?.['minlength']">Hotel Description must be at least 3 characters long.
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="hotelPrice" class="block text-sm font-medium text-gray-700">Hotel Price</label>
    <input type="number" formControlName="price"
      class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
      id="hotelPrice" placeholder="Enter hotel price">
    <div *ngIf="form.get('price')?.invalid && (form.get('price')?.dirty || form.get('price')?.touched)"
      class="text-red-500 text-sm mt-1">
      <div *ngIf="form.get('price')?.errors?.['required']">Hotel Price is required.</div>
      <div *ngIf="form.get('price')?.errors?.['min']">Hotel Price must be a positive number.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="hotelRating" class="block text-sm font-medium text-gray-700">Hotel Rating</label>
    <input type="number" formControlName="rating"
      class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
      id="hotelRating" placeholder="Enter hotel rating">
    <div *ngIf="form.get('rating')?.invalid && (form.get('rating')?.dirty || form.get('rating')?.touched)"
      class="text-red-500 text-sm mt-1">
      <div *ngIf="form.get('rating')?.errors?.['required']">Hotel Rating is required.</div>
      <div *ngIf="form.get('rating')?.errors?.['min']">Hotel Rating must be at least 0.</div>
      <div *ngIf="form.get('rating')?.errors?.['max']">Hotel Rating cannot be more than 5.</div>
    </div>
  </div>
  <div class="form-group">
    <label for="hotelTags" class="block text-sm font-medium text-gray-700">Hotel Tags</label>
    <div formArrayName="tags">
      <div *ngFor="let tag of tags.controls; let i=index" class="flex items-center space-x-2">
        <input type="text" [formControlName]="i"
          class="form-control mt-1 w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
          [id]="'hotelTag' + i" placeholder="Enter hotel tag">
        <button mat-icon-button (click)="tags.removeAt(i)" class="mt-1">
          <mat-icon class="text-red-500">delete</mat-icon>
        </button>
      </div>
      <button type="button" mat-button (click)="addTag()" class="mt-2">Add Tag</button>
    </div>
  </div>
  <div class="flex justify-between">
    <div class="flex space-x-1">
      <button type="submit" mat-flat-button (click)="submit()">Submit</button>
      <button type="button" mat-stroked-button routerLink="/">Cancel</button>
    </div>
    <button mat-stroked-button color="warn" aria-label="Delete hotel" *ngIf="hotel" (click)="showDeleteConfirmation = true">
      Remove
    </button>

    <div *ngIf="showDeleteConfirmation" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full">
        <h2 class="text-xl font-bold mb-4">Confirm Deletion</h2>
        <p class="mb-6">Are you sure you want to delete this hotel?</p>
        <div class="flex justify-end space-x-2">
          <button mat-stroked-button (click)="showDeleteConfirmation = false">Cancel</button>
          <button mat-flat-button color="warn" (click)="delete(hotel.id)">Delete</button>
        </div>
      </div>
    </div>
  </div>
</form>