Angular 4 Reactive Forms FormControl errors is null

That error is coming from this:

*ngIf="newPassword.touched && newPassword.errors.required"

When you put in a value, there is no longer an errors collection so checking newPassword.errors.required generates that Cannot read property 'required' of null error.

Try something like this instead:

*ngIf="newPassword.touched && newPassword.errors?.required"

As an example, mine looks like this:

            <div class="col-md-8">
                <input class="form-control" 
                        id="productNameId" 
                        type="text" 
                        placeholder="Name (required)"
                        required
                        minlength="3"
                        [(ngModel)] = product.productName
                        name="productName"
                        #productNameVar="ngModel" />
                <span class="help-block" *ngIf="(productNameVar.touched ||
                                                 productNameVar.dirty || product.id !== 0) &&
                                                 productNameVar.errors">
                    <span *ngIf="productNameVar.errors.required">
                        Product name is required.
                    </span>
                    <span *ngIf="productNameVar.errors.minlength">
                        Product name must be at least three characters.
                    </span>
                </span>
            </div>

You can also use the following syntax and it will work without the need to have a value first:

form.get('newPassword').hasError('required')

This will check for 'required' in the errors.

This will work as well and it's more concise :

form.hasError('required','newPassword')

If you are compiling with AOT option, according to this article, you should privilege hasError() syntax:

Don’t use control.errors?.someError, use control.hasError(‘someError’)