当表单'myForm'无效时,禁用'Submit Me'按钮。我试着搜索,但所有的例子都在形式。谁能告诉我怎么做?
注意:我要禁用的按钮是在表单之外,表单内的按钮将被禁用。
EDIT Additional:使用ng-include添加表单,使用单独的ng-include添加按钮。很抱歉没有添加这个细节,也许这是它在我的情况下不起作用的原因。
Plunkr: http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz <——现在可以工作了
Form.html
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form>
Button.html
<button ng-disabled="myForm.$invalid">Submit Me</button>
HtmlBody:
<body>
<div class="slide-animate" ng-include="'form.html'"></div>
<div class="slide-animate" ng-include="'button.html'"></div>
</body>
基本上我所做的是使用ng-form创建一个parentForm,这样我就可以访问由ng-include产生的子范围。
我已经添加了这个plunkr:
http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz您可以在控制器中监视给定表单的有效性,并基于此更新作用域值:
$scope.$watch('myForm.$valid', function(newVal) {
$scope.myFormValid = newVal;
});
然后在你的按钮上:
<button ng-disabled="!myFormValid">Submit Me</button>
通过将提交按钮放在表单外部来打破表单逻辑。
然而,我复制/粘贴你的html代码在一个jsfiddle,它工作得很好,没有任何改变。当字段为空时,提交按钮被禁用。
小提琴在这里:http://jsfiddle.net/LAeeF/
我刚刚添加了一个基本控制器:
function myCtrl($scope) {
$scope.submit = function () {
alert('Submit button enabled');
}
}