Angular 2 / 4 Form validation

ng-form-validation.html

<form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control"
               required minlength="4" maxlength="24"
               name="name" [(ngModel)]="hero.name"
               #name="ngModel" >
        <div *ngIf="name.errors && (name.dirty || name.touched)"
             class="alert alert-danger">
            <div [hidden]="!name.errors.required">
              Name is required
            </div>
            <div [hidden]="!name.errors.minlength">
              Name must be at least 4 characters long.
            </div>
            <div [hidden]="!name.errors.maxlength">
              Name cannot be more than 24 characters long.
            </div>
        </div>
      </div>
      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" id="alterEgo" class="form-control"
               name="alterEgo"
               [(ngModel)]="hero.alterEgo" >
      </div>
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select id="power" class="form-control"
                name="power"
                [(ngModel)]="hero.power" required
                #power="ngModel" >
          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>
        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
          <div [hidden]="!power.errors.required">Power is required</div>
        </div>
      </div>
      <button type="submit" class="btn btn-default"
             [disabled]="!heroForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default"
             (click)="addHero()">New Hero</button>
    </form>