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属性禁用broswer默认验证
每个输入只使用一个名称，为此，我们将使用ng-repeat提供的$ index，以使每个输入都具有自己的验证
在下面的示例中添加了一些可以触发验证错误的内容，我添加了必需的属性。因此，只要至少一个字段为空，该按钮将被禁用;

＆＃13;

gold

＆＃13;

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

＆＃13;

Answer 2

我不知道你在为每一行的表单做什么，但是为了在表单无效时停用按钮，你必须将表单包裹在表单中：

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

如果您无法将按钮放在此表单中，那么就是您不能使用Angular魔法因此使用它没有多大意义只是半屁股。

在控制器中放置一系列输入模型并检查是否所有模型都有效，然后设置值true / false以停用按钮。

Answer 3

首先，您应该定义一个带有name参数的表单，然后创建名称为paramaeter的输入字段。然后，您可以使用表单名称和输入名称参数来获取输入错误。

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

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

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

3 个答案: