add-horse.component.html 2.16 KB
Newer Older
Ivaylo Ivanov's avatar
Ivaylo Ivanov committed
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
<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)="addHorse()" #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" value=""></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>

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