Question

是否可以检查该表单在js文件中是否有效，但对于许多对象？我希望html中只有一个表单，并且不使用任何ng-repeats或html中的其他循环，然后检查表单对所有对象都有效。

Exmaple

<!DOCTYPE html>
<html ng-app="AngularApp">
<head>
    <script        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">    </script>
      <meta charset="utf-8">
      <title>JS Bin</title>
  </head>
  <body ng-controller="mainController">
  Click on table row if u want to change data in form
  <table>
    <thead>
      <tr>
        <td>
          Index
        </td>

        <td>
          Name
        </td>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="element in testCollection"
          ng-click="changeActiveElement(element)">
        <td>{{ $index }}</td>
        <td>{{ element.name }}</td>
      </tr>
    </tbody>
  </table>

  <br />
  <br />
  <br />

  <form name="exampleForm">
    <div class="row">
      Name [required]: <input type="text" ng-model="activeObject.name" required>
      </div>

    <div class="row">
    Phone [required]: <input type="text" ng-model="activeObject.phone" required>
    </div>

    <div class="row">
      Active: <input type="checkbox" ng-model="activeObject.active">
    </div>
  </form>

  <br />

  <button ng-disabled="">
    This button should be enable if all objects from table will pass form validation
  </button>

  but how to do this? Button should be know that every form is good or not, even if won't change object by clicking on table row.
</body>
</html>

Js：

var app = angular.module("AngularApp", []);

app.controller('mainController', function($scope) {
  $scope.testCollection = [
    {
      name: 'Mike',
      phone: 12345678,
      active: true
    },
    {
      name: 'Martin',
      phone: '',
      active: false
    },
    {
      name: 'Anna',
      phone: '',
      active: ''
    }
  ];

  $scope.activeObject = $scope.testCollection[0];

  $scope.changeActiveElement = function(element) {
    $scope.activeObject = element;
  };
});

Answer 1

Angular有FormController，其属性为$invalid

<强> $无效
  布尔
   True 如果至少有一个包含控件或表单无效。

你可以像

一样使用它

<button ng-disabled="formName.$invalid" ... >

Answer 2

是的可能，所以我们可以说“很多物品”是这样的：

$scope.fianlObject = { manyObj1 : {}, manyObj2 :{}}

然后用HTML做这样的事情：

<form id="frm1" name="frm1" ng-submit="submit()">
  <div class="form-group required" ng-class="isInvalid('manyObj1', form1)">
   ....
  </div>
  <div class="form-group required" ng-class="isInvalid('manyObj2', form1)">
   ....
  </div>
  .
  .
</form>

和脚本这样的东西：

$scope.isInvalid = function (manyObj, form) {
            if (form&& form.$submitted) {
                return ( form[manyObj] && form[manyObj].$invalid) ? 'has-error'
                        : '';
                }
                return '';
            }

Answer 3

是的，你可以这样做。

只需将验证器函数指定为纯函数，该函数只接受带有数据的普通对象并返回错误数组（如果一切正常则为空）。这个函数应该知道它所使用的上下文。

简单示例：

function validateForm(data) {
    var errors = [];
    if (data.name === 'Joe') errors.push("You can't be Joe!");
    return errors;
}

然后，每次要验证表单时，将表单数据转换为JS对象并使用该函数。此外，您可以在任何其他上下文中使用此类函数，无论谁是验证的发起者。

一种形式和许多具有不同数据的对象的验证

3 个答案: