javascript - Angular 服务器端验证，如何从对象引用中查找表单元素

Question

我有一个带有客户端和服务器端验证的复杂表单。让我们假设表单很简单:

<input type="text" name="name" ng-model="object.name"/>
<div ng-repeat="order in object.Orders">
    <input type="text" name="value{{$index}}" ng-model="order.Value"/>
    <input type="text" name="descr{{$index}}" ng-model="order.Descr"/>
</div>

实际的表单比这复杂得多，并且所有客户端验证都正常工作，我的问题是当用户通过 http ajax 请求提交表单时，服务器会返回 json 格式的验证错误，例如:

{ errors: [ { desc: "Invalid value", path: "object.Orders[0].Value" } ] }

我可以轻松获取服务器返回的路径的对象引用，但是，我如何获取表单元素，以便我可以在 Angular 内将其标记为无效？

我特别不想将表单元素设置为 $invalid。因为表单很复杂，而且我有很多表单，所以我不想自动从对象路径 object.Orders[0].Value 中查找表单元素。

谁能帮我解决这个问题

Answer 1

创建新的ErrorObjetct，当您收到响应时，将该错误响应分配给该对象并按如下方式使用该对象。

<input type="text" name="name" ng-model="object.name"/>
<div ng-repeat="order in object.Orders">
    <div>{{ErrorObject.value}}</div>
    <input type="text" name="value{{$index}}" ng-model="order.Value"/>
    <div>{{ErrorObject.descr}}</div>>
    <input type="text" name="descr{{$index}}" ng-model="order.Descr"/>
</div>