Geek Answers Handbook

AngularJS: disable button when input fields are empty

I have a drop-down menu, two text input boxes and a submit button. I want the submit button to be disabled until a drop-down list item is selected And both input fields are filled. I looked at several examples, including this one and this one , but none of them work 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>

Therefore, when the page load and all fields are empty by default, the button is Submitdisabled, and the problem is that after filling in all three fields it does not turn on. Thanks

+4
2

( myForm. $invalid), required . plunkr, .

<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>

. Angular 1.4 plunkr, , Angular .

: OP , JQuery datepicker. angular -ui boostrap datepicker? - Angular -UI Bootstrap docs

+7

ng-disabled="myForm.myName.$pristine", ,

.. ng

+4

More articles:


All Articles