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 "?"
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.
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 "?"
Why we use safe operator "?"
@konda Sorry, I just saw you comment. As David explained, errors do not exist always. So we should tell Angular render this div only when we have errors. If we do not use the safe operator, Angular tries to render something that does not exist. This results in crash.