<form #employeeForm="ngForm" ngNativeValidate (ngSubmit)="saveEmployee()">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Create Employee</h3>
  </div>
  <div class="panel-body">
    <div class="form-group" [class.has-error]="name.invalid && name.touched"
         [class.has-success] = "name.valid">

      <label for ="name" class="control-label">Full name</label>
      <input required id="name" name="name" [(ngModel)]="employee.name" type="text" class="form-control" #name="ngModel">
      <span class="help-block" *ngIf="name.invalid && name.touched" >
        Full name is required.
      </span>
    </div>

    <div class="form-group" [class.has-error]="email.invalid && email.touched" >
      <label for="email" class="control-label">Email</label>
      <input required  required pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" id="email" name="email" [(ngModel)]="employee.email" type="text" class="form-control" #email="ngModel">
      <span class="help-block" *ngIf="email.errors && email.errors.required && email.touched" >
        Email is required.
      </span>

      <span class="help-block" *ngIf="email.errors && email.errors.email && email.touched" >
        Email is invalid.
      </span>
    </div>

    <div class="form-group">
      <label for="phoneNumber">Phone Numeber</label>
      <input id="phoneNumber" name="phoneNumber" [(ngModel)]="employee.phoneNumber" type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>Contact Preference</label>
      <div class="form-control">
        <label class="radio-inline">
          <input type="radio" value="email" name="contactPreference" [(ngModel)]="employee.contactPreference">
          Email
        </label>
        <label class="radio-inline">
          <input type="radio" value="phone" name="contactPreference" [(ngModel)]="employee.contactPreference">
          Phone
        </label>
      </div>
    </div>
    <div class="form-group" [class.has-error]="gender.invalid && gender.touched">
      <label class="control-label">Gender</label>
      <div class="form-control">
        <label class="radio-inline">
          <input required #gender="ngModel" type="radio" value="male" name="gender" [(ngModel)]="employee.gender" >
          Male
        </label>
        <label class="radio-inline">
          <input required #gender="ngModel" type="radio" value="female" name="gender" [(ngModel)]="employee.gender">
          Female
        </label>
      </div>
      <span class="help-block" *ngIf="gender.touched && gender.invalid">
        Gender is required
      </span>
    </div>

    <div class="form-group">
      <div class="form-control">
        <label class="checkbox-inline">
          <input type="checkbox" value="isActive" name="isActive" [(ngModel)]="employee.isActive" >
          Is Active
        </label>
      </div>
    </div>

    <div class="form-group">
      <label for="department">
        Department
      </label>
      <select id="department" type="checkbox" name="department" [(ngModel)]="employee.department" class="form-control" >
<!--        [] value er pashe dorkar jkhn numebr input nicchi  -->
          <option disabled [ngValue]="null"> Select Department</option>
          <option *ngFor="let dept of departments" [value]="dept.id">
            {{dept.name}}
          </option>
      </select>
    </div>

    <div class="form-group">
      <label for="dateOfBirth">Date of Birth</label>
      <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="employee.dateOfBirth"
             type="date" class="form-control" />
    </div>
    <div class="form-group">
      <label for="photoPath">Photo Path</label>
      <input id="photoPath" name="photoPath" [(ngModel)]="employee.photoPath" type="text" class="form-control">
    </div>

    <div class="form-group">
      <button type="button" (click)="togglePhotoPreview()" class="btn btn-primary">{{previewPhoto? "Hide ": "Show "}} Preview</button>
    </div>
    <div class="form-group">
      <img [src]="employee.photoPath" height="200" width="200" *ngIf="previewPhoto">
    </div>
  </div>

  <div class="panel-footer">
      <button type="submit" class="btn btn-primary" [disabled]="employeeForm.invalid">Save</button>
  </div>
</div>
</form>

Angular Generated Form Model" {{employeeForm.value | json }}
<br/>
<br/>
Our Employee Model : {{employee | json}}