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

Posted 2023-03-05

【中文标题】AngularJS：输入字段为空时禁用按钮

【英文标题】：AngularJS: disable button when input fields are empty

【发布时间】：2016-10-26 04:37:21

【问题描述】：

我有一个下拉菜单、两个输入文本框和一个提交按钮。我希望禁用提交按钮，直到选择下拉项并且两个输入框都被填充。我查看了几个示例，包括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 按钮被禁用，问题是在所有三个字段都填充后，它没有被启用。谢谢

【问题讨论】：

你在按钮上试过了吗：ng-disabled="data.dropDown.length < 1 || data.date1.length < 1 || data.date2.length < 1"？它应该可以工作，因为您的模型是字符串。之后您还应该在submitRequest() 中进行数据验证。

我试过了，但即使在我填写了字段后，该按钮仍然处于禁用状态。会不会是下拉的原因？

这是一个可行的小提琴：jsfiddle.net/U3pVM/25802 另外，如果可以的话，请向我们提供控制器代码。您是否正确声明了范围变量？

感谢您的提琴，我知道是什么导致了问题。所以对于那些dateFrom 和dateTo 文本框字段，我使用jQuery 的datepicker UI 创建一个弹出日历供用户选择日期。当用户选择一个日期时，ng-model 的值没有更新。我该如何解决？

我不确定你是否可以这样绑定。 Google for JQuery Angular中的日期组件，应该可以找到解决办法。

【参考方案1】：

如果我将required 添加到下拉元素中，您的第二种方法对我有用（使用 myForm.$invalid）。我创建了一个 plunkr，你可以用 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 日期选择器吗？ Plunker example - Angular-UI Bootstrap docs

【参考方案2】：

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

请在此处查看小示例.. ng pristine example

【讨论】：

我试过了，按钮甚至没有被禁用。您知道我可以尝试的任何其他解决方案吗？