AngularJS UI映射.NET Core API嵌套集合ModelState验证问题

问题背景 #

我们在将AngularJS UI与.NET Core API控制器返回的验证结果映射时遇到了麻烦。内部系统采用AngularJS作为前端，其中一个API端点需要提交包含嵌套对象集合的复杂ViewModel，希望通过单次请求完成数据入库。API验证后的错误能正常返回，但返回的格式无法直接适配AngularJS的模型系统，之前考虑用jQuery操作DOM但不符合Angular规范，寻求合适的处理方式。

相关代码 #

.NET Core ViewModels

public class ViewModelA 
{
    public string Foo { get; set; }
}

public class ViewModelB 
{
    public ICollection<ViewModelA> Bar { get; set; }
}

.NET Core 控制器

public IActionResult Post(ViewModelB vm) 
{
    // 省略验证处理逻辑

    if(!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    // 省略其他逻辑
}

AngularJS 视图

<div ng-repeat="x in values.fooList track by $index">
    <div class="form-group">
        <input id="{{$index}}_foo" ng-model="x.foo"/>
        <span><!-- 验证提示位置 --></span>
    </div>
</div>

API 返回的错误格式

当集合项验证失败时，返回的JSON如下：

{
    "Bar[0].Foo" : "Error Message",
    "Bar[1].Foo" : "Error Message"
}

解决方案 #

方案1：前端解析错误键，映射到AngularJS模型

这是无需修改后端的方案，核心是在前端解析API返回的错误键（如Bar[0].Foo），将错误信息绑定到对应的列表项模型上。

首先，在API请求失败的回调中添加错误解析逻辑：

function handleValidationErrors(errorResponse) {
    const errors = errorResponse.data;
    angular.forEach(errors, (message, key) => {
        // 拆分错误键，提取集合名、索引和字段名
        const [collectionPart, fieldName] = key.split('.');
        const match = collectionPart.match(/(\w+)\[(\d+)\]/);
        if (!match) return;

        const [, collectionName, indexStr] = match;
        const index = parseInt(indexStr, 10);
        
        // 假设你的列表数据在$scope.values.fooList（对应后端的Bar集合）
        const listItem = $scope.values.fooList[index];
        if (!listItem) return;

        // 给列表项添加错误对象，存储字段错误
        if (!listItem.errors) {
            listItem.errors = {};
        }
        listItem.errors[fieldName] = message;
    });
}

然后修改视图，显示对应错误：

<div ng-repeat="x in values.fooList track by $index">
    <div class="form-group">
        <input id="{{$index}}_foo" ng-model="x.foo"/>
        <span ng-if="x.errors && x.errors.Foo" class="text-danger">
            {{x.errors.Foo}}
        </span>
    </div>
</div>

方案2：修改后端返回格式，适配前端结构

如果后端可以调整，建议将ModelState的错误转换为更贴近前端模型的数组结构，这样前端解析会更简单。

修改后端控制器的错误返回逻辑：

public IActionResult Post(ViewModelB vm) 
{
    if (!ModelState.IsValid)
    {
        var formattedErrors = new Dictionary<string, object>();
        
        foreach (var key in ModelState.Keys)
        {
            var errorMsg = ModelState[key].Errors.FirstOrDefault()?.ErrorMessage;
            if (string.IsNullOrEmpty(errorMsg)) continue;

            var keyParts = key.Split('.');
            if (keyParts.Length < 2) continue;

            var collectionMatch = System.Text.RegularExpressions.Regex.Match(keyParts[0], @"(\w+)\[(\d+)\]");
            if (!collectionMatch.Success) continue;

            var collectionName = collectionMatch.Groups[1].Value;
            var index = int.Parse(collectionMatch.Groups[2].Value);
            var fieldName = keyParts[1];

            // 初始化集合错误列表
            if (!formattedErrors.ContainsKey(collectionName))
            {
                formattedErrors[collectionName] = new List<Dictionary<string, string>>();
            }
            var collectionErrors = (List<Dictionary<string, string>>)formattedErrors[collectionName];

            // 确保列表长度足够容纳当前索引的错误
            while (collectionErrors.Count <= index)
            {
                collectionErrors.Add(new Dictionary<string, string>());
            }

            collectionErrors[index][fieldName] = errorMsg;
        }

        return BadRequest(formattedErrors);
    }

    // 省略其他逻辑
}

修改后API返回的错误格式会变成：

{
    "Bar": [
        { "Foo": "Error Message" },
        { "Foo": "Error Message" }
    ]
}

前端处理逻辑也会更简洁：

function handleValidationErrors(errorResponse) {
    const errors = errorResponse.data;
    if (errors.Bar) {
        angular.forEach(errors.Bar, (itemErrors, index) => {
            const listItem = $scope.values.fooList[index];
            if (listItem) {
                listItem.errors = itemErrors;
            }
        });
    }
}

方案3：结合AngularJS表单指令，映射到表单验证系统

如果你的页面使用了AngularJS的form或ng-form指令，可以将API错误绑定到表单控件的验证状态上，更贴合Angular的表单验证规范。

修改视图，添加子表单：

<form name="mainForm">
    <div ng-repeat="x in values.fooList track by $index" ng-form="itemForm">
        <div class="form-group">
            <input name="foo" id="{{$index}}_foo" ng-model="x.foo"/>
            <span ng-if="itemForm.foo.$error.server" class="text-danger">
                {{itemForm.foo.$error.server}}
            </span>
        </div>
    </div>
</form>

然后在错误处理中更新表单控件的验证状态：

function handleValidationErrors(errorResponse) {
    const errors = errorResponse.data;
    angular.forEach(errors, (message, key) => {
        const [collectionPart, fieldName] = key.split('.');
        const match = collectionPart.match(/(\w+)\[(\d+)\]/);
        if (!match) return;

        const [, , indexStr] = match;
        const index = parseInt(indexStr, 10);
        
        // 获取对应索引的子表单
        const itemForm = $scope.mainForm.$$controls[index];
        if (!itemForm || !itemForm[fieldName]) return;

        // 设置服务器验证失败状态，并存储错误信息
        itemForm[fieldName].$setValidity('server', false);
        itemForm[fieldName].$error.server = message;
    });
}

内容的提问来源于stack exchange，提问作者D Hansen