在重复之外访问ng-repeat ng-form

Question

我有一个按钮和一张桌子。 如果任何行无效，我想禁用该按钮。 我该如何实现？

///// This doesn't work, I have no access to myForm /////
<button ng-disabled="myForm.$invalid">Save</button>

<table>
  <tr ng-repeat="item in items" ng-form="myForm">
    <td>
      <input type="text" name="description" value="{{value.description}}" />
    </td>
  </tr>
</table>

编辑：将整个表格包装成表格，结果如下： http : //pasteboard.co/FJccNeg.png

Answer 1

您需要做很多事情：

• 具有表单标签以便启用验证。 使用novalidate属性禁用浏览器默认验证
• 每个输入仅使用一个名称，为此，我们将使用ng-repeat提供的$ index，以使每个输入都具有自己的验证
• 在下面的示例中添加一些可能触发验证错误的内容，我添加了required属性。 因此，只要至少一个字段为空，该按钮将被禁用；

 angular.module("app", []).controller("ctrl", function($scope){ $scope.items=[{description:"toto"},{}];//on with already existing one with empty }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <form name="myForm" ng-controller="ctrl" novalidate><!-- mandatory --> <button ng-disabled="myForm.$invalid">Save</button> <table> <tr ng-repeat="item in items" ng-form="myForm"> <td> <input type="text" name="{{'description'+$index}}" ng-model="item.description" required/> </td> </tr> </table> </form> </div> 

Answer 2

我不知道您对每一行的表单都在做什么，但是为了在表单无效时停用按钮，您必须将按钮包装在表单内：

<form name="myForm">
  <input name="description" type="text" ng-model="description" required />
  <button ng-disabled="myForm.$invalid">Save</button>
</form>

如果不能将按钮放置在此表单中，那么您将无法使用Angular魔术，因此仅使用半触键就没有太大意义。

在控制器内部具有一组输入ng-model，并检查它们是否均有效，然后将值设置为true / false以停用按钮。

Answer 3

首先，您应该使用名称参数定义一个表单，然后也使用名称参数创建输入字段。 然后，您可以使用form-name和input-name参数来达到输入错误。

    <form name="myForm" ng-controller="FormController" class="my-form">
          userType: <input name="input" ng-model="userType" required>
          <span class="error" ng-show="myForm.input.$error.required">Required!</span><br> > 

         <button ng-disabled="myForm.input.$error.required>"
        </form>