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:

 


        
                      

              相关标签:
       
      

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 "?"

Answer 2

One solution is already suggested by 'David Anthony Acosta'. I also solved it this way:

<div class="alert alert-danger" *ngIf="courseCategory.touched && !courseCategory.valid">

(The error message is supposed to be shown if the drop-down is touched, but no option has been selected).

Answer 3

I solved it this way in Angular 7+

<div *ngIf="formField.password.errors?.required" class="invalid-feedback">
Password is required
</div>

Answer 4

The code below worked for me. The '?' after courseCategory is not necessary, however, it's a workaround for a bug in Visual Studio code where the linter flags courseCategory.errors?.required" as an error stating that 'required is not defined. So for VSCode users, there's the patch until an official one is made. *ngIf="courseCategory.touched && courseCategory?.errors?.required"

Answer 5

I simply did the test over "errors" object:

<div *ngIf="formField.password.errors && formField.password.errors.required" class="invalid-feedback">
Password is required
</div>