AngularJS: disable button when input fields are empty

Question

I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" />
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2"   />

  <button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1  && !!data.date2)">Submit </button>
</form>

I also tried this method below:

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" >
    ** content for dropDown menu, populating it by using Django
  </select>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required />
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>

So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks

Did you try this on the button: ng-disabled="data.dropDown.length < 1 || data.date1.length < 1 || data.date2.length < 1"? It should work because your models are strings. You should also do data validation in submitRequest() afterwards. — Aleksandar Bencun
– Aleksandar Bencun, Commented Jun 23, 2016 at 17:53
I tried that but the button just stays disabled even after I the fields are filled. Could it be because of the dropdown? — Parth Bhoiwala
– Parth Bhoiwala, Commented Jun 23, 2016 at 18:03
Here's a Fiddle that works: jsfiddle.net/U3pVM/25802 Also, provide us with the controller code if you can. Are you declaring scope variables properly? — Aleksandar Bencun
– Aleksandar Bencun, Commented Jun 23, 2016 at 18:10
Thanks for the fiddle, I know what was causing the problem. So for those dateFrom and dateTo textbox fields, I was using jQuery's datepicker UI to create a popup calendar for user to choose date. And when user selects a date, the value of ng-model wasn't updated. How do I fix that? — Parth Bhoiwala
– Parth Bhoiwala, Commented Jun 23, 2016 at 18:26
I'm not really sure if you can bind that like that. Google for JQuery date component in Angular, you should be able to find a solution. — Aleksandar Bencun
– Aleksandar Bencun, Commented Jun 23, 2016 at 21:34

Mike H. · Accepted Answer · 2016-06-23 21:20:54Z

11

Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.

<form name="myForm">
  Select an option:
  <select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select><br/>
  From Date:
  <input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
  To Date:
  <input type="text" id="dateTo" ng-model="data.date2" required /><br/>
  <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>

Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.

Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs

edited Jun 23, 2016 at 21:20

answered Jun 23, 2016 at 18:11

Mike H.

1467 bronze badges

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

Comments

Rajesh · Accepted Answer · 2016-06-23 17:48:51Z

4

Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes

please check small example here.. ng pristine example

answered Jun 23, 2016 at 17:48

Rajesh

6602 gold badges7 silver badges14 bronze badges

1 Comment

Parth Bhoiwala Over a year ago

I tried this and the button doesn't even become disabled. Do you know of any other solution I can try?

Collectives™ on Stack Overflow

AngularJS: disable button when input fields are empty

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related