TypeError: Cannot read property 'valid' of undefined

Question

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?

Answer 1

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>

Answer 2

<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>

Answer 3

I had this problem due to using ng-if. I solved it using ng-hide instead.

ng-hide set DOM visibility false but ng-if removes DOM completely. Probably thats why angularjs can't see the form to validate when ng-if is used