The idea is disable the 'Submit Me' button when form 'myForm' is invalid. I tried searching but all of the examples are within the form. Can someone shed some ideas on how to do this?
当'myForm'格式无效时,我们的想法是禁用“提交我”按钮。我试过搜索,但所有的例子都在表格内。有人可以就如何做到这一点提出一些想法吗?
Note: The button I want to disable is outside the form, buttons within the form will be disabled.
注意:我要禁用的按钮位于表单之外,表单中的按钮将被禁用。
EDIT Additional: the form in being added using ng-include and the button is added using a separate ng-include. Sorry for not adding this detail maybe this is the reason it does not work in my case.
编辑附加:使用ng-include添加表单,使用单独的ng-include添加按钮。很抱歉没有添加此详细信息,这可能是因为它不适用于我的情况。
Plunkr: http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz <--- this is working now.
Plunkr:http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz <---现在正在运作。
Form.html
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.html
<button ng-disabled="myForm.$invalid">Submit Me</button>
HtmlBody:
HtmlBody:
<body>
<div class="slide-animate" ng-include="'form.html'"></div>
<div class="slide-animate" ng-include="'button.html'"></div>
</body>
3 个解决方案
#1
3
Basically what i did was create a parentForm using ng-form so I can access the child scopes produced by ng-include. See the plunkr for more information.
基本上我所做的是使用ng-form创建一个parentForm,这样我就可以访问ng-include生成的子范围了。有关更多信息,请参阅plunkr。
I have added this plunkr:
我添加了这个plunkr:
http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz
http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz
#2
2
You can watch the validity of a given form in your controller and update a scope value based on that:
您可以在控制器中查看给定表单的有效性,并根据以下内容更新范围值:
$scope.$watch('myForm.$valid', function(newVal) {
$scope.myFormValid = newVal;
});
Then on your button:
然后在你的按钮上:
<button ng-disabled="!myFormValid">Submit Me</button>
#3
1
You break the form logic by putting the submit button outside de form.
您可以通过将提交按钮放在de form之外来打破表单逻辑。
However, I copy/pasted your html code in a jsfiddle and it worked fine without any change. The submit button is disabled when the field is empty.
但是,我在一个jsfiddle中复制/粘贴你的html代码,它没有任何变化,工作正常。当字段为空时,将禁用提交按钮。
Here is the fiddle : http://jsfiddle.net/LAeeF/
这是小提琴:http://jsfiddle.net/LAeeF/
I just added a basic controller :
我刚刚添加了一个基本控制器:
function myCtrl($scope) {
$scope.submit = function () {
alert('Submit button enabled');
}
}
#1
3
Basically what i did was create a parentForm using ng-form so I can access the child scopes produced by ng-include. See the plunkr for more information.
基本上我所做的是使用ng-form创建一个parentForm,这样我就可以访问ng-include生成的子范围了。有关更多信息,请参阅plunkr。
I have added this plunkr:
我添加了这个plunkr:
http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz
http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz
#2
2
You can watch the validity of a given form in your controller and update a scope value based on that:
您可以在控制器中查看给定表单的有效性,并根据以下内容更新范围值:
$scope.$watch('myForm.$valid', function(newVal) {
$scope.myFormValid = newVal;
});
Then on your button:
然后在你的按钮上:
<button ng-disabled="!myFormValid">Submit Me</button>
#3
1
You break the form logic by putting the submit button outside de form.
您可以通过将提交按钮放在de form之外来打破表单逻辑。
However, I copy/pasted your html code in a jsfiddle and it worked fine without any change. The submit button is disabled when the field is empty.
但是,我在一个jsfiddle中复制/粘贴你的html代码,它没有任何变化,工作正常。当字段为空时,将禁用提交按钮。
Here is the fiddle : http://jsfiddle.net/LAeeF/
这是小提琴:http://jsfiddle.net/LAeeF/
I just added a basic controller :
我刚刚添加了一个基本控制器:
function myCtrl($scope) {
$scope.submit = function () {
alert('Submit button enabled');
}
}