AngularJS:输入字段为空时禁用按钮

Question

我有一个下拉菜单,两个输入文本框和一个提交按钮.我希望禁用提交按钮,直到选中下拉项并且两个输入框都已填满.我看了几个例子,包括这个和这个,但这些都不适合我.以下是我的代码.谢谢

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

我也尝试过以下方法:

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

因此,最初当页面加载并且默认情况下所有字段都为空时,Submit按钮被禁用,问题是在填充所有三个字段后,它不会被启用.谢谢

Answer 1

如果我添加required到下拉元素,你的第二种方法适用于我(使用myForm.$ invalid).我创造了一个你可以在这里玩的傻瓜.

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

注意:我在plunkr中使用了Angular 1.4,因为您没有指定使用哪个版本的Angular.

编辑:OP表示该问题是使用JQuery的datepicker创建的.我可以建议使用angular-ui boostrap datepicker吗？Plunker示例 - Angular-UI Bootstrap文档