AngularJS：多个表单的服务器端验证答案

【问题标题】：AngularJS: Server-side validation of multiple formsAngularJS：多个表单的服务器端验证
【发布时间】：2014-04-06 09:36:52
【问题描述】：

<form name="bigForm" ng-submit="submit()">
    <div class="form" ng-repeat="cake in cakes">
        <ng-form name="innerForm">
            <input type="text" name="cakeName" ng-model="cake.name">
            <input type="number" name="cakePrice" ng-model="cake.price">
        </ng-form>
    </div>
    <button type="submit">Submit</button>
</form>

在我发送的邮件上：

{
    [
     { name: "CakeA", price: 111},
     { name: "CakeB", price: 222}
    ]
}

服务器响应是：

{
    [
        { isCakeOk: true },
        { isCakeOk: false, errors: [{ name: "That's a bad name for a cake" }] }
    ]
}

现在，我想以正确的形式在正确的输入上设置 'serverValidation' $error。我该怎么做？在单个表单中，我会使用 bigForm.cakeName.$setValidity('serverValidation', false)，但是如果我有许多由 ng-repeat 创建的 (ng-) 表单呢？

【问题讨论】：

标签： javascript forms angularjs validation

【解决方案1】：

如果你想根据服务器响应显示错误信息，那么你可以这样做

将服务器响应分配给

$scope.cakes = [
                { isCakeOk: true },
                { isCakeOk: false, errors: [{ name: "That's a bad name for a cake" }] }
               ];

提交操作后。

同样，您可以将错误类分配给输入/标签，让用户知道错误。

如果您想访问 ng-repeat 表单元素，请像这样使用 bigForm.innerForm.cakeName

<script>
    var formApp = angular.module('formApp',[]);
    formApp.controller("FormController",function($scope){
        $scope.cakes =  [{ name: "CakeA", price: 111},{ name: "CakeB", price: 222}];

    });
</script>

<body ng-controller="FormController">
    <div class="form-container">
        <form name="bigForm" ng-submit="submit()">
            <div class="form" ng-repeat="cake in cakes">
                <ng-form name="innerForm">
                    <input type="text" name="cakeName" ng-model="cake.name" ng-required="true">
                    <span class="error">{{cake.errors[0].name}}</span>
                    <input type="number" name="cakePrice" ng-model="cake.price">
                </ng-form>
            </div>
            <button type="submit">Submit</button>
        </form>

    </div>
</body>

【讨论】：