javascript - AngularJS 服务器表单验证/Javascript : Parsing javascript variable "path"

Question

我正在构建一个连接到 REST 服务的 Angular 应用程序，该服务执行服务器端输入验证。

例如如果我使用 JSON 向服务器发送一个对象，例如:

entry: { id: 5, name: "Test", locales: ["de","en"] }

我会得到如下回复:

{ id: 5, name: "Test", countries: ["de","en"],
    __errors__: [
        { field: "entry.name", message: "Test already in use" },
        { field: "entry.countries[1]", message: "'en' is not a country" }
    ]
}

(为了更好的阅读而省略引号)

field 值是导致问题的原始值的 javascript 表示法的“路径”。

我对选择哪种表示法有一定的自由度，但我喜欢这个，因为它易于阅读并且与系统的其他部分集成。但我愿意接受更好的建议。

问题:

现在我希望 Angular 显示哪个字段因哪条消息而失败。最好的方法是什么？

我尝试了诸如 $scope.EditForm.$setValidity( field, message ) 但没有效果。

(注意:我正在使用 Angular 和 Bootstrap)

Answer 1

为什么不返回在标记中绑定(bind)的错误对象？

这是一个 fiddle :http://jsfiddle.net/edeustace/UMRU9/2/

这是一个片段:

<div ng-app="App" ng-controller="Ctrl">
  <input id="name" type="text" ng-model="name"></input>
  <span ng-show="errors.name" style="color: red">{{errors.name}}</span>
  <br/>
  <input id="lastName" type="text" ng-model="lastName"></input>
  <span ng-show="errors.lastName" style="color: red">{{errors.lastName}}</span>
  <div ng-repeat="c in countries">
    <input ng-model="c" type="text"></input>
    <span style="color: red" ng-show="errors.countries[$index]">{{errors.countries[$index]}}    </span>
  </div>
  <button ng-click="submit()">Submit</button>
</div>

Js:

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

app.controller('Ctrl', function($scope){

    $scope.name = "Ed";
    $scope.lastName = "Eustace";
    $scope.countries = ["Ireland", "England"];
    $scope.submit = function(){
        $scope.errors = {name: "Name in use", lastName: "", countries: ["Ireland is not available"] };
    }
});

这样，您只需连接 ui，并且由于数据绑定(bind)，更新将免费进行。