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>

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

Answer 1

如果我将required添加到下拉列表元素，那么第二种方法适用于我（使用myForm。$ invalid）。我创建了一个可以使用here播放的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>

注意：我在plunkr中使用了Angular 1.4，因为你没有指定你正在使用哪个版本的Angular。

编辑：OP表示该问题是使用JQuery的datepicker创建的。我可以建议使用angular-ui boostrap datepicker吗？ Plunker example - Angular-UI Bootstrap docs

Answer 2

为什么不使用ng-disabled="myForm.myName.$pristine"，因为pristine将检查插入文本框中的每个变量

请在这里查看小例子.. ng pristine example

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

2 个答案: