0

我是 Angular 的新手，我想做一些重要的输入验证。

基本上我有一张桌子。每行包含三个文本输入。当用户输入任何文本输入时，我想检查表格是否包含至少一行和三个非空白输入字段。如果是这样，我想显示一条消息。

我不知道如何在 Angular 中干净地做到这一点，任何帮助将不胜感激。

这是我的 HTML：

<tr data-ng-repeat="i in [1,2,3,4,5]">
  <td data-ng-repeat="i in [1,2,3]">
    <input ng-model="choice.selected" ng-change='checkAnswer(choice)' type="text" />
  </td>
</tr>
... 
<div ng-show="haveCompleteRow">we have a complete row!</div>

和控制器：

$scope.haveCompleteRow = false;
$scope.checkAnswer=function(choice){
  $scope.haveCompleteRow = true; // what to do here?
}

这是一个演示该问题的 plunker：http: //plnkr.co/edit/Ws3DxRPFuuJskt8EUqBB

4

1 回答 1

3

老实说，我不会将此称为表单验证。但是对于初学者来说，如果你有一个真实的模型来观察，而不是模板中的数组，那会简单得多。您开始的方式将或至少可以引导您在控制器内部进行 dom 操作，这对于 Angular 来说是不行的。

带有模型的简单的第一个草图可以是：

app.controller('TestCtrl', ['$scope', function ($scope) {
  $scope.rows = [
    [{text: ''}, {text: ''}, {text: ''}],
    [{text: ''}, {text: ''}, {text: ''}],
    [{text: ''}, {text: ''}, {text: ''}]
  ];

  $scope.haveCompleteRow = false;

  // watch for changes in `rows` (deep, see last parameter `true`).
  $scope.$watch('rows', function (rows) {
    // and update `haveCompleteRow` accordingly
    $scope.haveCompleteRow = rows.some(function (col) {
      return col.every(function (cell) {
        return cell.text.length > 0;
      });
    });
  }, true);
}]);

和：

<body ng-controller="TestCtrl">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>

    <tbody>
      <tr data-ng-repeat="row in rows">
        <td data-ng-repeat="cell in row">
          <input ng-model="cell.text" type="text" />
        </td>
      </tr>
    </tbody>
  </table>

  <div ng-show="haveCompleteRow">we have a complete row!</div>
</body>

作为模板。

演示：http: //jsbin.com/URaconiX/2/

于 2013-11-13T14:43:19.163 回答