Question

这个想法是禁用“提交我”＆＃39;表格＆＃39; myForm＆＃39;是无效的。我尝试搜索，但所有示例都在表单内。有人可以就如何做到这一点提出一些想法吗？

注意：我要禁用的按钮位于表单之外，表单中的按钮将被禁用。

编辑附加：使用ng-include添加表单，使用单独的ng-include添加按钮。很抱歉没有添加此详细信息，这可能就是我在这种情况下不起作用的原因。

Plunkr：http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz＆lt; ---现在正在运作。

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>

Answer 1

基本上我所做的是使用ng-form创建一个parentForm，这样我就可以访问ng-include生成的子范围了。有关详细信息，请参阅plunkr。

我添加了这个plunkr：

http://plnkr.co/edit/7BY2kwciERqQLNGfcDtz

Answer 2

您可以在控制器中查看给定表单的有效性，并根据以下内容更新范围值：

$scope.$watch('myForm.$valid', function(newVal) {           
  $scope.myFormValid = newVal;
});

然后按下按钮：

<button ng-disabled="!myFormValid">Submit Me</button>

Answer 3

您可以通过将提交按钮放在de form之外来打破表单逻辑。

但是，我在一个jsfiddle中复制/粘贴你的html代码，它没有任何变化，工作正常。当字段为空时，将禁用提交按钮。

这是小提琴：http://jsfiddle.net/LAeeF/

我刚添加了一个基本控制器：

function myCtrl($scope) {
    $scope.submit = function () {
        alert('Submit button enabled');
    }
}

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

3 个答案: