ng-repeat 中的角度验证不起作用 [英] Angular validation in an ng-repeat not working

问题描述

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

我对小提琴手的尝试

<form name="myForm" ng-submit="submitMe(this)" novalidate><table class="table"><tr ng-repeat="订单中的订单"><ng-form name="innerForm"><td>{{ order.id }}</td><td><div class="form-group" ng-class="{ 'has-error' :innerForm.name.$invalid && submit }"><input type="input" ng-model="order.name" name="name" required/>
</td></ng-form></tr><input type="submit" value="submit" ng-click="submitted = true"/></表单><预>{{ 订单 |json }}

var app = angular.module("app", []);app.controller("bookController", function ($scope) {$scope.submitMe = 函数(表单){控制台日志(表单)；};$scope.orders = [{编号:1，姓名: ''}, {编号:2，名称:'帽子'}];});

解决方案

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

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

I'm having difficulty getting the validation to work using an ng-repeat statement. I have the following code. I just want the has-error to be added to the div.form-group when the name field is empty. I cant seem to get it work. Any thoughts?

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

});

解决方案

Move the ngForm directive to the element that contains the ngRepeat directive:

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

Demo: http://jsfiddle.net/YTR95/

这篇关于ng-repeat 中的角度验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！