我有一个下拉菜单、两个输入文本框和一个提交按钮。我希望在选择下拉项并且两个输入框都被填充之前禁用提交按钮。我看了几个例子,包括 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>
因此,最初当页面加载并且所有字段默认为空时,提交
按钮被禁用,问题是在所有三个字段都已填写后,它不会被启用。谢谢
最佳答案
如果我将 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
关于javascript - AngularJS:输入字段为空时禁用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37998477/