27

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?

2
  • 4
    i guess you missed this: '#name="ngModel"'. in your case: #content="ngModel"
    – michael
    Commented Aug 29, 2016 at 19:16
  • Actually I get the same error
    – TheUnreal
    Commented Aug 29, 2016 at 19:17

5 Answers 5

43

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>
8
  • 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
    – TheUnreal
    Commented Aug 29, 2016 at 19:26
  • 1
    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. Commented Aug 29, 2016 at 19:32
  • 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?
    – TheUnreal
    Commented Aug 29, 2016 at 19:34
  • 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. Commented Aug 29, 2016 at 20:06
  • "Everything is binded to your model" helped me out, thanks. Commented Aug 27, 2018 at 1:54
4
<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>
0
2

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

0

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.