当兄弟ng-include中的表单为$ invalid时，如何禁用ng-include中的按钮？

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 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:

HtmlBody：

  <body>
    <div class="slide-animate" ng-include="'form.html'"></div>
    <div class="slide-animate" ng-include="'button.html'"></div>
  </body>

3 个解决方案

#1

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

#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

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