title: Angular 2 form validation, hasError is not a function
body: <p>i try to make a validation for my input fields. </p>
  
  <p>this is a piece of code that I used:</p>
  
  <p><strong>DepartmentComponent</strong></p>
  
  <pre><code>import {  
    FORM_DIRECTIVES,  
    FormBuilder,  
    ControlGroup,  
    Validators ,
     AbstractControl   
  } from 'angular2/common';
  
  
  
  
  @Component({
      selector: 'my-departments',
      providers: [HTTP_PROVIDERS, DepartmentService],
      directives: [FORM_DIRECTIVES, Alert],
      styleUrls: ['app/department.component.css'],
      templateUrl: 'app/department.component.html',
      pipes:[SearchPipe]
  
  })
  
  export class DepartmentComponent implements OnInit {
      myForm: ControlGroup;
      departmentName: AbstractControl;
      departmentLocation: AbstractControl;
  
      constructor(private _router: Router, private _departmentService: DepartmentService, fb: FormBuilder) { 
  
        this.myForm = fb.group({  
          'departmentName':  ['', Validators.required],
          'departmentLocation':  ['', Validators.required]  
        });
  
        this.departmentName= this.myForm.controls['departmentName'];  
        this.departmentLocation= this.myForm.controls['departmentLocation'];  
      }
  </code></pre>
  
  <p><strong>DepartmentComponent template</strong></p>
  
  <pre><code>   &lt;form [ngFormModel]="myForm"  
            (ngSubmit)="addDepartment(newItem)" [hidden]="!showAddView" align="center"&gt;
          &lt;div&gt;       
              &lt;label for="editAbrv"&gt;Department name:&lt;/label&gt;&lt;br&gt;
                &lt;input type="text" [(ngModel)]="newItem.departmentName" [ngFormControl]="myForm.controls['departmentName']" &gt; 
  
           &lt;div *ngIf="departmentName.hasError('required')"  class="ui error message"&gt;&lt;b style="color:red;"&gt;Name is required&lt;/b&gt;&lt;/div&gt;  
        &lt;/div&gt;
  
          &lt;div&gt;
              &lt;label for="editAbrv"&gt;Department Location:&lt;/label&gt;&lt;br&gt;
               &lt;input type="text" [(ngModel)]="newItem.departmentLocation" [ngFormControl]="myForm.controls['departmentLocation']" &gt; 
  
           &lt;div *ngIf="departmentLocation.hasError('required')" class="ui error message"&gt;&lt;b style="color:red;"&gt;Location is required&lt;/b&gt;&lt;/div&gt;  
        &lt;/div&gt; 
  
  
          &lt;div&gt;
              &lt;button type="submit" class="ui button"&gt;Submit&lt;/button&gt;  
              &lt;button&gt;&lt;a href="javascript:void(0);" (click)="showHide($event)" &gt;
                  Cancel
              &lt;/a&gt;&lt;/button&gt;
          &lt;/div&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>The problem is that I got an error: .hasError is not a function. hasError function is in my html file (which you can see) I really don't see where I'm wrong. I did everything like is described in tutorial, but can't figure out why is this happen. Thanks for advice!</p>