Angular 2 form validation, hasError is not a function

Question

i try to make a validation for my input fields.

this is a piece of code that I used:

DepartmentComponent

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'];  
    }

DepartmentComponent template

   <form [ngFormModel]="myForm"  
          (ngSubmit)="addDepartment(newItem)" [hidden]="!showAddView" align="center">
        <div>       
            <label for="editAbrv">Department name:</label><br>
              <input type="text" [(ngModel)]="newItem.departmentName" [ngFormControl]="myForm.controls['departmentName']" > 

         <div *ngIf="departmentName.hasError('required')"  class="ui error message"><b style="color:red;">Name is required</b></div>  
      </div>

        <div>
            <label for="editAbrv">Department Location:</label><br>
             <input type="text" [(ngModel)]="newItem.departmentLocation" [ngFormControl]="myForm.controls['departmentLocation']" > 

         <div *ngIf="departmentLocation.hasError('required')" class="ui error message"><b style="color:red;">Location is required</b></div>  
      </div> 


        <div>
            <button type="submit" class="ui button">Submit</button>  
            <button><a href="javascript:void(0);" (click)="showHide($event)" >
                Cancel
            </a></button>
        </div>
</form> 

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!

Solution 1

you should use *ngIf="myForm.controls['departmentLocation'].hasError('required')"

or any better luck with this.departmentName= this.myForm.controls.find('departmentName'); ?

Solution 2

In place of hasError you should use errors

i.e it should be

myForm.controls['departmentLocation'].errors['required']

i.e with *ngIf

*ngIf="myForm.controls['departmentLocation'].errors['required']"

Comments

[Yuniku_123]

it works when I use this.departmentName= this.myForm.controls.find('departmentName');. Really strange, since in tutorial I found this.departmentName= this.myForm.controls.find ['departmentName' ]; Thanks :)

[Lucas Colombo]

Using this approach, when the control is valid (so, errors is null), it shows me the next message: Cannot read property 'required' of null

[Lokinder Singh Chauhan]

quick trick could be to check error for not null(for condition when there is no error in control) i.e *ngIf="myForm.controls['departmentLocation'].errors && myForm.controls['departmentLocation'].errors['required']"

[Vishal]

to prevent not null error use this as myForm.controls['departmentLocation'].errors?.required

[Christian Matthew]

why don't people just use . notation it is so much easier to read. I get the emphasis is on the [' --- '] but the reality is it is just an object and should be treated as such

[Christian Matthew]

btw the reason why this answer is mostly correct is because that is what is in the object. If people could read objects this answer would have been easier to find for oneself