Cannot read property 'error' of undefined in Angular 2?

Question

Cannot read property 'error' of undefined in Angular 2?

During use of following code, I have code following error ,I think I have to import some proerty like FormModule in module.ts, but I don't not what is that?? Please help me to solve this?

Firstname: <input type="text" class="_firstname" name="txtFirstname"    [(ngModel)]="firstName" placeholder="Enter First Name"  #txtFather="ngModel"><br><br>
<div *ngIf="txtFirstname.error &&(txtFirstname.dirty || txtFirstname.touched)" class="alert alert-danger">
    <div [hidden]="!txtFirstname.errors.required">
          Name  is required!
   </div>
</div>

I've got:

reg.component.html:8 ERROR TypeError: Cannot read property 'error' of undefined
    at Object.eval [as updateDirectives] (reg.component.html:9)
    at Object.debugUpdateDirectives [as updateDirectives] (services.ts:443)
    at checkAndUpdateView (view.ts:359)
    at callViewAction (view.ts:767)
    at execComponentViewsAction (view.ts:700)
    at checkAndUpdateView (view.ts:413)
    at callViewAction (view.ts:767)
    at execComponentViewsAction (view.ts:700)
    at checkAndUpdateView (view.ts:413)
    at callWithDebugContext (services.ts:815)

Well, your control variable is txtFather: #txtFather="ngModel" — JB Nizet
– JB Nizet, Commented Jul 17, 2018 at 6:20

Suren Srapyan · Accepted Answer · 2018-07-17 06:53:13Z

4

You haven't an element with name txtFirstname. You have used #txtFather="ngModel", so you need to use txtFather.error instead of txtFirstname.error.

You have bind your input to the property firstName, but your control name is txtFather.

<input type="text" class="_firstname" name="txtFirstname" [(ngModel)]="firstName" placeholder="Enter First Name"  #txtFather="ngModel">
<br><br>
<div *ngIf="txtFather.error &&(txtFather.dirty || txtFather.touched)" class="alert alert-danger">
   <div [hidden]="!txtFather.errors.required">
          Name  is required!
   </div>
</div>

edited Jul 17, 2018 at 6:53

answered Jul 17, 2018 at 6:20

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

Nav Over a year ago

#Suran ,But Still its not working, Is there Any error

Nav Over a year ago

@Suran, thanks For Help,{ Actually I missed 'required' in first line}

David R · Accepted Answer · 2018-07-17 06:21:04Z

1

Use ? to check null / undefined values like this,

txtFirstname?.error

Hope this helps!

answered Jul 17, 2018 at 6:21

David R

15.7k8 gold badges59 silver badges74 bronze badges

Comments

Pawana · Accepted Answer · 2018-07-17 06:22:09Z

1

You need to state following in the top area of your module.ts

import { FormsModule }   from '@angular/forms';

And after that you need to put it in the "imports" brackets of the @NgModule Part

This is an example from the Angular Documentation:

@NgModule({


imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

answered Jul 17, 2018 at 6:22

Pawana

2961 gold badge4 silver badges11 bronze badges

Comments

Malindu Sandaruwan · Accepted Answer · 2018-07-17 06:22:55Z

0

This error is given because txtFirstname is undefined. It seems that you don't have such variable.

answered Jul 17, 2018 at 6:22

Malindu Sandaruwan

1,5173 gold badges15 silver badges28 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'error' of undefined in Angular 2?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related