update-horse.component.html 2.46 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Error! </strong> {{ errorMessage }}
    <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div *ngIf="success" class="alert alert-success alert-dismissible fade show" role="alert">
    <p><strong>Success! </strong> Horse {{ success }} has been successfully added. </p>
    <button type="button" (click)="vanishAlert()" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="container">
    <h1>Add new horse</h1>
    <form (ngSubmit)="updateHorse()" #horseForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="horse.name" required>
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <textarea class="form-control" name="description" [(ngModel)]="horse.description"></textarea>
      </div>

      <div class="form-group">
        <label for="score">Score</label>
        <select class="form-control" name="score" [(ngModel)]="horse.score" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>

      <div class="form-group">
        <label for="race">Race</label>
        <select class="form-control" name="race" [(ngModel)]="horse.race" required>
          <option value="ARABIAN">Arabian</option>
          <option value="MORGAN">Morgan</option>
          <option value="PAINT">Paint</option>
          <option value="APPALOOSA">Appaloosa</option>
        </select>
      </div>

      <div class="form-group">
        <label for="birthday">Birthday</label>
        <input type="date" class="form-control" name="birthday" [(ngModel)]="horse.birthday" required pattern="\d{4}-\d{2}-\d{2}">
      </div>

      <div class="form-group">
        <label for="image">Image</label>
        <input type="file" class="form-control-file" name="image" id="image" (change)="handleImageInput($event.target.files)" required>
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!horseForm.form.valid" (submit)="updateHorse()">Submit</button>
    </form>
  </div>