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

Question

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

///// 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 以使每个输入都有自己的验证
• 在下面的示例中添加一些可能会触发验证错误的内容，我添加了必需的属性。因此，只要至少有一个字段为空，该按钮就会被禁用；

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>