hero-form.component.html

<form [formGroup]="heroForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label for="hero">Hero :<br></label>
      <input class="form-control" formControlName="name" placeholder="Name">
      <div *ngIf="name.invalid" style="color: red;">
        <div *ngIf="name.errors.required">
          Name Required
        </div>
        <div *ngIf="name.errors.minlength">
          Listen, a name with less than 3 character is NOT a name
        </div>
        <div *ngIf="name.errors.forbiddenName">
          "Mr Badman" is banished by order from our prof!
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="alterEgo">Alter Ego :<br></label>
      <input class="form-control" formControlName="alterEgo" placeholder="Alter Ego">
      <div *ngIf="alterEgo.invalid" style="color: red;">
        <div *ngIf="alterEgo.errors.required">
          Unless you are Thanos, you need a secret identity
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="superPowers">Super Power :<br></label>
      <select class="form-control" formControlName="powers">
          <option value="">{{ hero.power }}</option>
          <option *ngFor="let power of powers">{{ power }}</option>
      </select>
    </div>

    <div class="form-group">
      <label for="ssn">SSN :<br></label>
      <input class="form-control" formControlName="ssn" placeholder="ssn">
       <div *ngIf="ssn.invalid" style="color: red;">
        <div *ngIf="ssn.errors.required">
          Ssn can't be null
        </div>
        <div *ngIf="heroForm.getError('message', 'ssn') as errors">
          {{ errors }}
        </div>
       </div>
    </div>


    <button type="submit" [disabled]="!heroForm.valid">Validate</button>
  </form>