Angular2 template based form validation doesn't work

Question

I'm currently trying to add validation to an angular 2 form, but for some reason I can't get my submit button to disable when the required fields are not filled in. Here is the code of my form template:

<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
    <md-dialog-content>
        <md-input-container>
            <input #name md-input placeholder="Name" value="" name="name" focused required>
        </md-input-container>
        <br />
        <md-select #inputtype placeholder="Input type" name="inputtype">
            <md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
            {{inputtype.name}}
            </md-option>
        </md-select>
    </md-dialog-content>
    <md-dialog-actions>
        <button type="submit" md-raised-button color="primary"  [disabled]="!formCtrl.form.valid">Create</button>
    </md-dialog-actions>
</form>

According to several examples, this should work, however the button is never disabled. I've also tried "!formCtrl.valid", also to no avail. I've tried using non-material design input fields thinking maybe that would be the issue, but it still won't work.

I then tried copy/pasting the following simple example into my application, and even that won't work at all: http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Any ideas as to what might prevent it from working correctly?

I may be wrong, but did you try without using the value attribute ? something like : <input #name md-input placeholder="Name" name="name" focused required> — mickdev
– mickdev, Commented Feb 2, 2017 at 16:21

AVJT82 · Accepted Answer · 2017-02-02 19:18:02Z

3

Assuming you are using a newer release than Angular 2 final:

You need to add ngModel, which binds the form value based on the name attribute’s value. In your case one is name="inputtype" the other is name="name". So you need to add ngModel to bind the values, and your form should work as you wish! :)

So the following should work (removed a bit of noise from code):

<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
    <md-dialog-content>
        <md-input-container>
            <input md-input name="name" required ngModel>
        </md-input-container>
        <md-select name="inputtype" required ngModel>
            <md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
            {{inputtype.name}}
            </md-option>
        </md-select>
    </md-dialog-content>
    <md-dialog-actions>
        <button type="submit" md-raised-button color="primary"  [disabled]="!formCtrl.form.valid">Create</button>
    </md-dialog-actions>
</form>

Don't remember when this was introduced, this should be found somewhere in the changelogs which can be useful to have a look at once in a while, since Angular is constantly tweaking things almost in every release. So following that will keep you updated with changes and syntax :)

edited Feb 2, 2017 at 19:18

answered Feb 2, 2017 at 19:10

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

Jort Over a year ago

This solved the issue for me. Thanks for letting me know.

AVJT82 Over a year ago

No problem, glad I could help! :)

Collectives™ on Stack Overflow

Angular2 template based form validation doesn't work

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