title: AngularJS: disable button when input fields are empty
body: <p>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 <a href="https://stackoverflow.com/questions/15300067/disable-submit-button-when-form-invalid-with-angularjs">this one</a> and <a href="https://stackoverflow.com/questions/18261003/angularjs-form-custom-validation-check-if-at-least-one-input-is-empty">this one</a> but none of these are working for me. Below is my code. Thanks</p>
  
  <pre><code>&lt;form name="myForm"&gt;
    Select an option:
    &lt;select id="dropDown" name="dropDown" ng-model="data.dropDown" &gt;
      ** content for dropDown menu, populating it by using Django
    &lt;/select&gt;
    From Date:
    &lt;input type="text" id="dateFrom" ng-model="data.date1" /&gt;
    To Date:
    &lt;input type="text" id="dateTo" ng-model="data.date2"   /&gt;
  
    &lt;button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown &amp;&amp; !!data.date1  &amp;&amp; !!data.date2)"&gt;Submit &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I also tried this method below:</p>
  
  <pre><code>&lt;form name="myForm"&gt;
    Select an option:
    &lt;select id="dropDown" name="dropDown" ng-model="data.dropDown" &gt;
      ** content for dropDown menu, populating it by using Django
    &lt;/select&gt;
    From Date:
    &lt;input type="text" id="dateFrom" ng-model="data.date1" required/&gt;
    To Date:
    &lt;input type="text" id="dateTo" ng-model="data.date2" required /&gt;
    &lt;button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid"&gt;Submit &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So initially when the page loads and all fields are empty by default, the <code>Submit</code> button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks</p>