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

Question

我table用ng-repeat的表行.我想从单行进行内联编辑和数据验证,但是无法使用form或ng-form在表内部.对于内联编辑,我使用ng-show内部输入td.所以,我有两个问题:

1. 这是内联编辑的正确方法吗？(在td中使用隐藏输入).

2. 如何验证行中的数据？

更新:我希望表格行像"表单提交",并为表格单元格添加错误类别与错误的数据.

我很有棱角.

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