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

Posted 2023-03-05

【中文标题】ng-repeat 中的角度验证不起作用

【英文标题】：Angular validation in an ng-repeat not working

【发布时间】：2014-05-03 18:22:21

【问题描述】：

我很难使用 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'
    ];

);

【问题讨论】：

嵌套ng-form有原因吗？

因为不能动态生成表单输入元素的“name”属性，他需要这个属性来验证docs.angularjs.org/api/ng/directive/form。另见***.com/questions/12044277/…

【参考方案1】：

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

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

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

【讨论】：

在 Angular 1.3.15 中，我无法让它工作。以这种方式使用时，ng-form 不会拾取父表单。我以前用它成功过，但在一张桌子上，这不起作用。