media-item-form.component.html

<header>
  <h2>Add Media to Watch</h2>
</header>
<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">
  <ul>
    <li>
      <label for="medium">Medium</label>
      <select name="medium" id="medium" formControlName="medium">
        <option *ngFor="let medium of lookupLists.mediums" value="{{medium}}">{{medium}}</option>
      </select>
    </li>
    <li>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" formControlName="name">
      <div *ngIf="form.controls.name.errors?.pattern" class="error">
        Name has invalid characters
      </div>
    </li>
    <li>
      <label for="category">Category</label>
      <select name="category" id="category" formControlName="category">
        <option value="Action">Action</option>
        <option value="Science Fiction">Science Fiction</option>
        <option value="Comedy">Comedy</option>
        <option value="Drama">Drama</option>
        <option value="Horror">Horror</option>
        <option value="Romance">Romance</option>
      </select>
    </li>
    <li>
      <label for="year">Year</label>
      <input type="text" name="year" id="year" maxlength="4" formControlName="year">
      <div *ngIf="form.controls.year.errors?.year" class="error">
        Must be between 
        {{form.controls.year.errors?.year.min}} 
        and 
        {{form.controls.year.errors?.year.max}}
      </div>
    </li>
  </ul>
  <button type="submit" [disabled]="!form.valid">Save</button>
</form>