Javascript AngularJS：当输入字段为空时禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37998477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: disable button when input fields are empty
提问by Parth Bhoiwala
I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this oneand this onebut none of these are working for me. Below is my code. Thanks
我有一个下拉菜单、两个输入文本框和一个提交按钮。我希望提交按钮被禁用，直到下拉项目被选中并且两个输入框都被填满。我看了几个例子，包括这个和这个，但这些都不适合我。下面是我的代码。谢谢
<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>
I also tried this method below:
我也在下面尝试了这个方法：
<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>
So initially when the page loads and all fields are empty by default, the Submitbutton is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks
所以最初当页面加载并且默认情况下所有字段都为空时，该Submit按钮被禁用，问题是在所有三个字段都填充后，它不会被启用。谢谢
回答by Michael H.
Your second method works for me (utilizing myForm.$invalid) if I add requiredto the dropdown element. I've created a plunkr you can play with here.
如果我添加required到下拉元素，您的第二种方法对我有用（使用 myForm.$invalid）。我创建了一个 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>
Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.
注意：我在 plunkr 中使用了 Angular 1.4，因为您没有指定您正在使用哪个版本的 Angular。
Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example- Angular-UI Bootstrap docs
编辑：OP 表示该问题是使用 JQuery 的日期选择器创建的。我可以建议使用 angular-ui boostrap datepicker 吗？Plunker 示例- Angular-UI Bootstrap 文档
回答by Rajesh
Why dont you use ng-disabled="myForm.myName.$pristine"because pristine will check for each variable inserted in textboxes
为什么不使用，ng-disabled="myForm.myName.$pristine"因为原始会检查插入到文本框中的每个变量
please check small example here.. ng pristine example
请在此处查看小示例.. ng 原始示例
