TypeError: Cannot read property 'valid' of undefined

error typeerror: cannot read property of undefined
uncaught typeerror: cannot read property of null
typeerror: cannot read property of undefined angular
typeerror: cannot read property of undefined typescript
typeerror: cannot read property of undefined react
typeerror: cannot read property of undefined nodejs
uncaught typeerror: cannot read property of undefined jquery
typeerror: cannot read property 'value' of undefined react

I have the following textarea:

<textarea class="form-control" [(ngModel)]="content" name="content" required>
        </textarea>

and the following submit button:

 <button type="submit" class="btn btn-default" [disabled]="content.valid">New comment</button>

As I saw in the angular 2 form guide (https://angular.io/docs/ts/latest/guide/forms.html) I can use the x.valid in order to check if it's not empty.

Why do I get TypeError: Cannot read property 'valid' of undefined error?

In your case content is a property on your model.

In order to do what you want you need to use a template reference value for the form control #myControl="ngModel" and then you have access to the valid property: myControl.valid.

So in your example:

<textarea class="form-control" [(ngModel)]="content"
          name="content" required #myControl="ngModel">
</textarea>

And use it in the button tag:

<button type="submit" class="btn btn-default" 
[disabled]="myControl.valid">New comment</button>

Uncaught TypeError: Cannot read property of undefined , Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as  Uncaught TypeError: Cannot read property 'innerHTML' of null. All this means is that you are trying to access a property of an object that is undefined. These usually happens when we don't test an object before using it. Here is a common scenario.

<div class="form-group">
    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
        <input type="text" class="form-control" id="name" placeholder="Name" minlength="4" maxlength="24"  [(ngModel)]="name" name="email" #myName="ngModel" required>
            <div *ngIf="myName.errors && (myName.dirty || myName.touched)" class="alert alert-danger">
                <div [hidden]="!myName.errors.required">
                    Name is required
                </div>
                <div [hidden]="!myName.errors.minlength">
                    Name must be at least 4 characters long.
                </div>
                <div [hidden]="!myName.errors.maxlength">
                    Name cannot be more than 24 characters long.
                </div>
            </div>
    </div>
</div>

​​Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined.​ The dreaded error we all hit at some point in JavaScript development. Could be  Cannot read property 'addEventListener' of undefined That means that toggleButton is undefined , so the most likely problem is that at the time document.getElementsByClassName("toggle-button") ran, there was no matching element.

In my case i removed the ngModel from #myName="ngModel" to make it work. Angualr version 5.2.11

Uncaught TypeError: Cannot read property 'value' of undefined , Seems like one of your values, with a property key of 'value' is undefined. Test that i1 , i2 and __i are defined before executing the if statements: ERROR in TypeError: Cannot read property ‘flags’ of undefined at resolveAlias (C:UsersOM GANESHDesktopAngularDemonode_modulestypescriptlibtypescript.js:36513:37) at checkAliasSymbol (C:…

You could use ngModelChange as a workaround:

<input type="text" [ngModel]="model.property (ngModelChange)="detectChanges($event, model, validation)" #validation="ngModel" required validation>

And in your component:

 detectChanges(newVal, model, validation): void {
     if (validation.valid) model._valid = true;
     else model._valid = false;
 }

This can give you more flexibility when you are using *ngFor to display lots of input fields and want to validate them individually.

TypeError: Cannot read property 'firstName' of undefined , I keep getting "TypeError: Cannot read property 'firstName' of undefined" and I cannot figure out what is going on. Does anyone have an idea? var bob = { Uncaught TypeError: Cannot read property 'addClass' of undefined [duplicate] Tag: javascript. This question already has an answer here:

TypeError: Cannot read property 'setState' of undefined, TypeError: Cannot read property 'setState' of undefined. Whenever your 'this' is undefined you're most likely not passing an arrow function to your event.. Uncaught TypeError: Cannot read property of undefined In JavaScript. Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as Undefined.

Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one simple way to prevent them, with JavaScript  I'm trying to use a Google Translate to translate text from a text box in javascript. I don't want to translate my entire web page but just the text within the text box. this is my error: 'Uncaught

Uncaught TypeError: Cannot read property '_handle' of undefined , In Inspect I'm getting the following error: Uncaught TypeError: Cannot read property '_handle' of undefined at eval (index.js?2f37:3) at Array. Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! But avoid … Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

Comments
  • i guess you missed this: '#name="ngModel"'. in your case: #content="ngModel"
  • Actually I get the same error
  • Thanks! How I can send content in my ngSubmit()? My form is assigned with <form (ngSubmit)="onSubmit()"> but I have no idea how to get the content value with this way
  • If you used ngModel on the controls everything is binded to your model, so you can use that. If you need more from the form you can do as in the doc and get a reference for the form itself '#heroForm="ngForm"' and then use that.
  • What I don't understand is how I can use the value of content in my component (.ts file)? Do I need to pass it as parameter or I can use it in my component another way?
  • Content should be a property in your component starting with. Since it's using two way binding it will have the latest changes when you call submit. Have a look at the end of the docs section on the link you provided, might be easier to understand from them.
  • "Everything is binded to your model" helped me out, thanks.