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

Question

我有一个下拉菜单、两个输入文本框和一个提交按钮。我希望在选择下拉项并且两个输入框都被填充之前禁用提交按钮。我看了几个例子，包括 this one和 this one但这些都不适合我。下面是我的代码。谢谢

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

因此，最初当页面加载并且所有字段默认为空时，提交 按钮被禁用，问题是在所有三个字段都已填写后，它不会被启用。谢谢

Answer 1

如果我将 required 添加到下拉元素，你的第二种方法对我有用(利用 myForm.$invalid)。我创建了一个你可以玩的插件 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>

注意:我在 plunkr 中使用了 Angular 1.4，因为您没有指定您使用的 Angular 版本。

编辑:OP 声明问题是使用 JQuery 的日期选择器创建的。我可以建议使用 angular-ui boostrap datepicker 吗？ Plunker example - Angular-UI Bootstrap docs