add-horse.component.html 2.74 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
<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>
20
      <input type="text" class="form-control" name="name" pattern="\S+.*" [(ngModel)]="horse.name" required>
Ivaylo Ivanov's avatar
Ivaylo Ivanov committed
21 22 23 24
    </div>

    <div class="form-group">
      <label for="description">Description</label>
25
      <textarea class="form-control" name="description" pattern="\S+.*" [(ngModel)]="horse.description" value=""></textarea>
Ivaylo Ivanov's avatar
Ivaylo Ivanov committed
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
    </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>

Ivaylo Ivanov's avatar
Ivaylo Ivanov committed
54 55 56 57 58
    <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>

59 60 61 62 63 64 65 66 67 68
    <div class="form-group">
      <label for="race">Owner</label>
      <select class="form-control" name="owner" [(ngModel)]="horse.owner">
        <option *ngFor="let owner of owners"
          [value]="owner.id">
          {{ owner.name }}
      </option>
      </select>
    </div>

Ivaylo Ivanov's avatar
Ivaylo Ivanov committed
69
    <button type="submit" class="btn btn-success" [disabled]="!horseForm.form.valid" (submit)="addHorse()">Submit</button>
70
    <a class="btn btn-light float-right" href="horse">Cancel</a>
Ivaylo Ivanov's avatar
Ivaylo Ivanov committed
71 72
  </form>
</div>