Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Angular Basics Angular Form Validation Styling Form Inputs

Linda de Haan
Linda de Haan
12,413 Points
Posted by Linda de Haan
Linda de Haan
12,413 Points

Error: Cannot read property 'required' of null

I checked the video again, but can't seem to find what is wrong with the code. Andrew's code works at the end and his comment is submitted. But in my browser I get an error and both custom warning messages show up and the comment isn't posted. The erros says:

EXCEPTION: Error in ./EntryCommentFormComponent class EntryCommentFormComponent - inline template:7:17 caused by: Cannot read property 'required' of null

This is the entire form:

<form (submit)="onSubmit()" #commentForm="ngForm" novalidate>
<div>
    <label for="name">Name</label>
    <input type="text" name="name" [(ngModel)]="name" 
        required minlength="3" #nameField="ngModel" 
        [ngStyle]="{'outline-color': nameField.dirty && nameField.valid ? 'green' : undefined }"/>
    <div class="alert alert-danger" *ngIf="(commentForm.submitted || nameField.touched && nameField.errors)">
        <div [hidden]="!nameField.errors.required">Name is required</div>
        <div [hidden]="!nameField.errors.minlength">Name must be a minimum of 3 characters long</div>
    </div>
</div>
<div>
    <label for="comment">Comment</label>
    <textarea name="comment" [(ngModel)]="comment" 
        required minlength="3" #commentField="ngModel"
        [ngStyle]="{'outline-color': commentField.dirty && commentField.valid ? 'green' : undefined }"></textarea>
    <div class="alert alert-danger" *ngIf="(commentForm.submitted || commentField.touched && commentField.errors)">
        <div [hidden]="!commentField.errors.required">Comment is required</div>
        <div [hidden]="!commentField.errors.minlength">Comment must be a minimum of 3 characters long</div>
    </div>
</div>
<div>
    <button>Submit</button>
</div>
</form>

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

I have not worked with this myself, but it sounds like the "errors" property may contain null instead of an object when there is no error.

If that's the case, it may help to substitute "!nameField.errors.required" with
"!(nameField.errors && nameField.errors.required)"

Something similar might need to be done with the "minlength" property as well.

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Linda. Steven's assessment of the problem is correct. The teacher (Andrew) warns that this error will appear in his previous 'Form and Input State' video. He explains that we need to stop Angular from evaluating the code until we have actually touched or dirtied the form. So this is where the 2 ngIf directives comes in. They prevent the evaluation until either the form is submitted OR dirtied** OR touched AND there is an error with the nameField.

Unfortunately your closing parentheses came too late resulting in the ngIf always being TRUE. Change both lines like so and all will be good.

(** Andrew subsequently explains why we can drop the need for 'dirtied'.)

entry-comment-form.component.html

lines 7 & 17

<div class="alert alert-danger" *ngIf="(commentForm.submitted || nameField.touched) && nameField.errors">
<div class="alert alert-danger" *ngIf="(commentForm.submitted || commentField.touched) && commentField.errors">