new-emp-template.html

<div class="well">
  <form class="form-horizontal"
        [formGroup]="employeeDetailsForm"
        novalidate
        (ngSubmit)="addEmployee()">
    <div class="form-group">
      <label class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
        <input type="text" id="name"
               [formControl]="employeeDetailsForm.controls.name">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">E-mail</label>
      <div class="col-sm-10">
        <!-- <p class="form-control-static">{{ employee.email }}</p> -->
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Position</label>
      <div class="col-sm-10">
        <input type="text" id="position"
               [formControl]="employeePosition">
               <div [hidden]="employeePosition.valid || employeePosition.untouched">
                 <div [hidden]="!employeePosition.hasError('minlength')">
                  Invalid value, enter more than 3 chr
                 </div>
                 <div [hidden]="!employeePosition.hasError('needs2')">
                    It should contain 2
                   </div>
               </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Address</label>
      <div class="col-sm-10">
        <!-- <p class="form-control-static">{{ employee.address | stringify }}</p> -->
      </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10">
          <input type="submit" value="Add employee" [disabled]="!employeeDetailsForm.valid">
        </div>
      </div>
  </form>
</div>