Cannot read property 'required' of null : <p>In the template I have a form, which one part of it has to do with rendering the list of courses:</p>

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

<p>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:</p>

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

<p>Can you help me finding out what causes this error?</p>

<p>Bootstrap 3.3.7 is already installed in the VS Code.</p>
