Cannot read property 'required' of null

Question

In the template I have a form, which one part of it has to do with rendering the list of courses:

<form #f="ngForm" (ngSubmit)="submit(f)">  <div class="form-group">   <label for="courseCategory"> Category </label>   <select required ngModel name="courseCategory" #courseCategory="ngModel" id="courseCategory" class="form-control">     <option value=""></option>     <option *ngFor="let category of categories" [value]="category.id"> // line 16       {{category.name}}     </option>   </select>   <div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors.required">     Course category is required   </div>  </div> </form> 

In the browser when I select a category and press TAB (to move away from the drop-down list), I get this error on Console:

CourseComponent.html:16 ERROR TypeError: Cannot read property 'required' of null at Object.eval [as updateDirectives] (CourseComponent.html:20)

Can you help me finding out what causes this error?

Bootstrap 3.3.7 is already installed in the VS Code.

Answer 1

Errors won't always exist, so you have to define it like this:

<div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors?.required"> 

With the safe operator "?"