Question

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

这是内联编辑的正确方法吗？（使用隐藏的输入在td内。
如何验证行中的数据？

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

我是棱角分明的新人。

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

Answer 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: 'email@email.com' }, { id: 2, firstName: 'Petr', lastName: 'Petrov', email: 'email@email.com' } ]; $scope.emailRegExp = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/; }

拜托，请参阅jsfiddle：）

Jsfiddle

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

我认为有两种方法可以做到：

1）在您的控制器中，您可以创建$scope.dateRegExp = "/^\d{2}([./-])\d{2}\1\d{4}$/"并在视图中使用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 } };

Answer 3

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

（可选）不要使用表格。使用嵌套列表并使用css强制它看起来像一个表。
以Angularish方式执行：在表格单元格/行（无论如何）上使用自定义directive，directive应watch更改单元格内容，然后运行您拥有的任何自定义验证和逻辑。

Answer 4

我认为你不需要在tds中隐藏你的输入，你可以使用CSS来填充td，例如没有边框。
正如@alonisser所说，angular-way是创建一个指令来处理它。为了解决我的类似情况，我创建了一个'super'表指令，它提供了我的表模板并处理它的行为。关于模板：我将表包装成表单;）

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
      });
    }
  }
});

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

4 个答案: