hero-detail.component.html

hero-detail.component.html

...

<form [formGroup]="heroForm" (ngSubmit)="onSubmit()" novalidate>
  <div style="margin-bottom: 1em">
    <button type="submit"
            [disabled]="heroForm.pristine || name.invalid" class="btn btn-success">Save</button> &nbsp;
    <button type="reset" (click)="revert()"
            [disabled]="heroForm.pristine" class="btn btn-danger">Clear</button>
  </div>

  <!-- Hero Detail Controls -->
  <div class="form-group">
      <label class="center-block">Name:
        <input id="name" class="form-control" formControlName="name" required >
      </label>
      <div *ngIf="name.invalid && (name.dirty || name.touched)"
      class="alert alert-danger">
        <div *ngIf="name.errors.required">
        Name is required.
        </div>
        <div *ngIf="name.errors.minlength">
        Name must be at least 4 characters long.
        </div>
      </div>
      
  </div>

...
  
</form>