如何使用 Angular 验证表格行数据？

Posted 2023-03-05

【中文标题】如何使用 Angular 验证表格行数据？

【英文标题】：How to validate table row data with Angular?

【发布时间】：2014-03-04 15:55:47

【问题描述】：

我有table 和ng-repeat 用于表格行。我想对单行数据进行内联编辑和验证，但在表格内无法使用form 或ng-form。 对于内联编辑，我在td 内使用带有ng-show 的输入。 所以，我有两个问题：

内联编辑的方法是否正确？ （使用隐藏输入 td 内）。

如何验证行中的数据？

更新：我希望表格行类似于“表单提交”，并为包含错误数据的表格单元格添加错误类。

我是 Angular 新手。

【参考方案1】：

NG-Form 适用于非 html 表单的元素。因此，您应该能够在表中使用内置的 ng-form 验证。它似乎为我正确地跟踪了每行的表单。

https://docs.angularjs.org/api/ng/directive/form

 <tr ng-repeat="market in markets | orderBy:'name'" ng-form name="myForm">
   <td>market.id</td>
   <td ng-class="'has-error': !myForm.minimum.$valid">
     <input type="number" name="minimum" min="0" max="10000" ng-model="market.minimum" />
   </td>
   <td ng-class="'has-error': !myForm.cash.$valid">
    <input type="number" ng-model="market.cash" min="0" name="cash" />
  </td>
  <td>
    <input type="submit" ng-disabled="!myForm.$valid" ng-click="save(market)"/>
  </td>
</tr>

【讨论】：

这很接近，并且更符合原始问题的愿望（imo），但有一个问题。使用您的代码，“myForm”位于 $scope 上，因此添加多行时，只有最后一行才会真正“坚持”。我举了你的例子，而不是 name="market.myForm" 和（在输入中）"！market.myForm.$valid" 并且事情按预期工作。

【参考方案2】：

我为您的第二个问题创建了简单验证的示例：

查看：

<div ng-controller="MyCtrl">
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Id</th>
                <th>Firstname</th>
                <th>Lastname</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>item.id</td>
                <td><input ng-model="item.firstName" ng-class=" error: !item.firstName "/></td>
                <td><input ng-model="item.lastName" ng-class=" error: !item.lastName "/></td>
                <td><input ng-model="item.email" ng-pattern="emailRegExp" ng-class=" error: !item.email "/></td>
                <td><button ng-disabled="!item.lastName || !item.firstName || !item.email"/>Submit</td>
            </tr>
        </tbody>
    </table>
</div>

控制器：

function MyCtrl($scope) 
    $scope.items = [
        
            id: 1,
            firstName: 'Ivan',
            lastName: 'Ivanov',
            email: '[e-mail]'
        ,
        
            id: 2,
            firstName: 'Petr',
            lastName: 'Petrov',
            email: '[e-mail]'
        
    ];

    $scope.emailRegExp = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]2,4$/; 

请看 jsfiddle :)

Jsfiddle

关于日期验证的评论问题：

我看到了两种方法：

1) 在你的控制器中创建$scope.dateRegExp = "/^\d2([./-])\d2\1\d4$/" 并进入你使用ng-pattern="dateRegExp" 的视图

2)你可以使用ng-change=""指令：

查看：

<tr ng-repeat="item in items">
    <td><input ng-model="item.date" ng-change="validateDate(itemDate)" ng-class=" error: dateInputError "/></td>

控制器：

$scope.dateInputError = false;

$scope.validateDate = function(date) 
   if(//some validation)
      $scope.dateInputError = true; //true - it means error style shows
   
;

【讨论】：

谢谢，你的例子很棒，如何在控制器中进行验证？我有两个以上的字段，还需要检查日期是否正确。所以视野会很大。

酷，感谢更新。我可以使用任何控制器的方法进行验证吗？

验证数据的方法是否正确？ ($scope.emailRegExp) 也许最好使用一些验证方法，我会检查所有数据？

【参考方案3】：

解决这个问题的方法（增量）：

（可选）不要使用表格。使用嵌套列表并用 css 强制它看起来像一个表格。

以 Angular 的方式进行：在表格单元格/行（无论如何）上使用自定义 directive directive 应该 watch 单元格内容进行更改，然后运行任何自定义验证和逻辑你有。

【讨论】：

感谢您的回答！关于 2) 我更新了问题。

【参考方案4】：

我认为您不需要将输入隐藏在 td 中，您可以使用 CSS 使它们填充 td，例如没有边框。

正如@alonisser 所说，角度方式是创建一个指令来处理它。为了解决我的类似情况，我创建了一个“超级”表指令，它提供我的表模板并处理它的行为。关于模板：我将表格包装成一个表格；）

HTML 示例：

<form name="tableform">
    <table>
      <tbody>
        <tr class="tr-rawdata" ng-repeat="row in tableData track by $index" ng-model="row">
          <td ng-repeat="cell in row track by $index">
            <input type="text" ng-model="row[$index]">
          </td>
        </tr>
      </tbody>
    </table>
</form>

指令示例：

angular.module('myApp').directive('superTable', function() 
  return 
    restrict: 'A',
    templateUrl: 'partials/super-table.html',
    link: function($scope, $elem, $attrs) 

      $elem.on('blur', function(e) 
        //do something
      );
    
  
);