Javascript AngularJS：多个表单的服务器端验证_Javascript_Forms_Angularjs_Validation

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

javascript forms angularjs validation

Javascript AngularJS：多个表单的服务器端验证,javascript,forms,angularjs,validation,Javascript,Forms,Angularjs,Validation,服务器响应为： { [ { name: "CakeA", price: 111}, { name: "CakeB", price: 222} ] } 现在，我想以正确的形式在正确的输入上设置'serverValidation'$error。我该怎么做？在单个表单中，我会使用bigForm.cakeName.$setValidity（'serverValidation'，false），但是如果我有许多由ng repeat创建的（ng-）表单，该怎么办？如果您希

服务器响应为：

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

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

如果您希望根据服务器响应显示错误消息，那么您可以这样做

将服务器响应分配给

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

提交操作后

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

如果要访问ng repeat form元素，请像这样使用bigForm.innerForm.cakeName

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


var formApp=angular.module（'formApp'，[]）；
formApp.controller（“FormController”，功能（$scope）{
$scope.cakes=[{name:“CakeA”，价格：111}，{name:“CakeB”，价格：222}]；
});
{{cake.errors[0].name}
提交

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

<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>