Cannot read property 'errors' of undefined in angular 2

Question

I am validating my template using angular2, but meanwhile it shows this error:

 Cannot read the property 'errors' of undefined.

Here is my template:

<h3 class = "head">{{title}}</h3>
<form  [ngFormModel]="form" #f="ngForm">
  <div class="row">
    <div class="form-group">     
      <label class="formHeading">Facebook</label>
      <input type="text" id="facebook" class="form-control col-xs-3"  ngControl="facebook" #facebook="ngForm" >  
    </div>
    <div *ngIf ="facebook.touched  && facebok.errors">  
      <div class="form-row btn">
      <button type="submit" class="btn btn-primary pull-right butspace" [disabled]="!f.valid">Save</button>
    </div>
  </div>
</form>

I dont know why it shows this error. Can anyone fix it?

hholtij · Accepted Answer · 2016-06-25 12:17:15Z

24

First of all, you have facebok instead of facebook on the error property.

If that doesn't fix it you're probably using the facebook object before it is assigned, which can happen if it's an @Input() for example.

Use the Elvis operator:

*ngIf ="facebook?.touched && facebook?.errors"

answered Jun 25, 2016 at 12:17

hholtij

2,9466 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrClean Over a year ago

Elvis operator worked for me. I was setting up my form groups in the constructor, which was apparently too late for the DOM.

ErickXavier Over a year ago

@hholtij I couldn't post the full comment here, so I answered the post.

Collectives™ on Stack Overflow

Cannot read property 'errors' of undefined in angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related