angularjs – ng-repeat中的角度验证不起作用

发布时间：2020-12-17 17:48:56 所属栏目：安全来源：网络整理

导读：我在使用ng-repeat语句进行验证时遇到了困难.我有以下代码.我只想在名称字段为空时将has-error添加到div.form-group.我似乎无法让它工作.有什么想法吗？ My Attempt in fiddler div ng-app="app" ng-controller="bookController" form name="myForm" ng-subm

我在使用ng-repeat语句进行验证时遇到了困难.我有以下代码.我只想在名称字段为空时将has-error添加到div.form-group.我似乎无法让它工作.有什么想法吗？

My Attempt in fiddler

<div ng-app="app" ng-controller="bookController">
    <form name="myForm" ng-submit="submitMe(this)" novalidate>
        <table class="table">
            <tr ng-repeat="order in orders">
                <ng-form name="innerForm">
                <td>{{ order.id }}</td>
                <td>
                    <div class="form-group" ng-class="{ 'has-error' : innerForm.name.$invalid && submitted }">
                        <input type="input" ng-model="order.name" name="name" required />
                    </div>
                </td>
                </ng-form>
            </tr>
        </table>
        <input type="submit" value="submit" ng-click="submitted = true" />
    </form>

    <pre>
        {{ orders | json }}
    </pre>

</div>


var app = angular.module("app",[]);

app.controller("bookController",function ($scope) {

    $scope.submitMe = function(form) {
        console.log(form);
    };

    $scope.orders = [{
        id: 1,name: ''
    },{
        id: 2,name: 'hat'
    }];

});

解决方法

将ngForm指令移动到包含ngRepeat指令的元素：

<tr ng-repeat="order in orders" ng-form="innerForm">

演示：http://jsfiddle.net/YTR95/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!