当同级ng-include中的窗体无效时，如何禁用ng-include中的按钮?

How do I disable a button in an ng-include when a form in a sibling ng-include is $invalid?

本文关键字：ng-include 何禁用 按钮 窗体 无效      更新时间：2023-09-26

当表单'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');
    }
}
相关文章：