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

25 浏览
0 Comments

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

我有一个下拉菜单，两个输入文本框和一个提交按钮。我希望只有在选择下拉菜单项并且两个输入框都填写了内容时，提交按钮才可用。我查看了几个示例，包括这个和这个，但这些都对我无效。以下是我的代码。谢谢\n


  选择一个选项：
  
  开始日期：
  
  结束日期：

\n我还尝试了下面的方法：\n


  选择一个选项：
  
  开始日期：
  
  结束日期：

\n所以初始加载页面时，所有字段都是空的，提交按钮是禁用的，问题是当所有三个字段都填写了内容后，它没有启用。谢谢

0

2 答案

0 Comments

问题出现的原因是没有正确使用ng-disabled指令来禁用按钮。解决方法是使用ng-disabled指令，并检查表单中的输入字段是否为空。以下是一个解决方案的示例：




  AngularJS: disable button when input fields are empty

你可以在上面的示例中看到，当输入字段为空时，按钮将被禁用。

0
0 Comments

问题的出现原因：当输入字段为空时，按钮仍然可以点击，表明表单验证未生效。

解决方法：在下拉框元素中添加required属性，并利用myForm.$invalid来禁用按钮。另外，也可以使用angular-ui bootstrap datepicker插件来解决该问题。

以下是解决方法的具体代码示例：

<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版本，因为没有指定正在使用的Angular版本。另外，提议使用angular-ui bootstrap datepicker插件来解决使用JQuery的datepicker引起的问题。

希望以上内容对您有所帮助。

0