使用 angular 验证 table 行中的输入

Question

我使用 this lib 在页面上创建 table。

table 中的每一行都可以编辑。因此，如果 editMode 打开，我会在行的每一列显示输入。其中一些输入是必需的。如果必填字段为空，我想显示红色文本 "Required" 或仅显示红色边框。但是问题 - 当我使用表单时很简单。但就我而言，我不能使用表格。

This answer 对我不好，因为每一行都必须有唯一的表单名称才能正确验证。

示例：https://jsfiddle.net/r8d1uq0L/147/

<div ng-repeat="user in users">
    <div name="myform-{{user.name}}" ng-form>
        <input type="text" ng-model='user.name' required name="field"/>
        <span class="error" ng-show="myform.field.$error.required">Too long!</span>
    </div>
</div>
<div>
    <button ng-click="add()">
        Add
    </button>
</div>

    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [{name:"1"}, {name:"2"}];
    $scope.add = function(){
    $scope.users.push({});
    }
});

Answer 1

无需创建动态表单名称，因为 ng-repeat 在浏览器上绘制模板时会在每次迭代时创建新的子作用域。所以只需将名称保留为 name="innerForm" 并使用 innerForm.field.$error.required 对其进行验证。

<div ng-repeat="user in users">
    <div name="innerForm" ng-form>
        <input type="text" ng-model='user.name' required name="field"/>
        {{myform[$index]}}
        <span class="error" ng-show="innerForm.field.$error.required">Too long!</span>
    </div>
</div>

Forked Fiddle

使用 angular 验证 table 行中的输入

Validate inputs in table row with angular

javascript

validation

require

angularjs