6

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

Community
  • 1
  • 1
Parth Bhoiwala
  • 1,282
  • 3
  • 19
  • 44
  • 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 Jun 23 '16 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 Jun 23 '16 at 18:03
  • 1
    Here's a Fiddle that works: https://jsfiddle.net/U3pVM/25802/ Also, provide us with the controller code if you can. Are you declaring scope variables properly? – Aleksandar Bencun Jun 23 '16 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 Jun 23 '16 at 18:26
  • 1
    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 Jun 23 '16 at 21:34
  • @AleksandarBencun hi how about md-datepicker how can detect if the datepicker is fill and then button will enable??? – wiwit Nov 17 '16 at 08:54

2 Answers2

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

Michael H.
  • 146
  • 7
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

Rajesh
  • 642
  • 2
  • 7
  • 14