Template for the reactive form

reactive-form.component.html

<form novalidate [formGroup]="bookForm">

  <h1>Reactive Form Example</h1>

  <div class="group">
    <label for="title">Book Title * </label>
    <input type="text"
      [class.error]="!bookTitle.valid && bookTitle.touched"
      [formControl]="bookTitle"
      id="title" 
      placeholder="Book Title" 
      required>
      <div *ngIf="bookTitle.touched">
        <p *ngIf="bookTitle.hasError('required')">Field is required.</p>
        <p *ngIf="bookTitle.hasError('maxlength')">
          Book title must be less than {{maxBookLength}} characters.</p>
      </div>
  </div>

  <div class="group">
    <label for="author-first-name">Author's First Name *</label>
    <input type="text"
      [formControl]="firstName"
      [class.error]="!firstName.valid && firstName.touched"
      id="author-first-name" 
      class="medium" 
      placeholder="Author First Name" 
      required>
      <p *ngIf="!firstName.valid && firstName.touched">Field is required.</p>
  </div>

  <div class="group">
    <label for="author-last-name">Author's Last Name *</label>
    <input type="text" 
      [formControl]="lastName"
      [class.error]="!lastName.valid && lastName.touched"
      id="author-last-name" 
      class="medium" 
      placeholder="Author Last Name" 
      required>
      <p *ngIf="!lastName.valid && lastName.touched">Field is required.</p>      
  </div>

  <div class="group">
    <label for="author-email-address">Author's Email</label>
    <input type="email" 
      [formControl]="emailAddress"
      id="author-email-address"
      placeholder="Author Email"
      [class.error]="!emailAddress.valid && emailAddress.touched" 
      required>
        <p *ngIf="emailAddress.touched&& emailAddress.hasError('invalidEmail')">Enter a valid email address.</p>
    </div>

  <div class="group">
    <label for="genre">Genre *</label>
    <input type="text"
      [class.error]="!genre.valid && genre.touched"
      [formControl]="genre" 
      id="genre" 
      placeholder="Genre" 
      required>
    <p *ngIf="!genre.valid && genre.touched">Field is required.</p>
  </div>

  <div class="checkbox">
    <label>
      <input type="checkbox" [formControl]="bookRead" value="true">Read</label>
  </div>
  <br>
  <br>
  <p><strong>*</strong> Indicates a required field.</p>
  <hr>
  <button type="button" [disabled]="!bookForm.valid">Submit</button>
  <button class="clear" (click)="initializeForm()" type="button">Clear</button>

</form>