AngularJS：更新模型与设置表单有效性同函数执行时失效问题

嘿，我之前也踩过这个坑！这其实是AngularJS的脏检查循环机制在搞鬼——当你在同一个函数里先修改模型再重置表单有效性时，Angular还没来得及完成模型更新对应的表单状态同步，你的重置操作就先执行了，结果后续的脏检查又把表单状态改回了和新模型对应的状态（相当于你的重置操作被覆盖了）。第二次点击时模型已经是空的，没有新的状态变化，重置操作才真正生效。

下面是修正后的代码，只需要做一点小调整：

首先，确保你的控制器注入了$timeout服务：

app.controller('YourFormController', ['$scope', '$timeout', function($scope, $timeout) {
    // 你的现有控制器代码...

    $scope.clear = function () { 
        // 第一步：清空模型值
        for (var i = 0; i < $scope.nums.length; i++) { 
            for (var j = 0; j < $scope.nums.length; j++) { 
                $scope.nums[i][j] = null; 
            } 
        } 

        // 第二步：用$timeout把有效性重置放到下一个脏检查周期执行
        $timeout(function() {
            angular.forEach($scope.myForm.$$controls, function (control, key) { 
                // 重置控件有效性
                control.$setValidity('', true);
                // 额外：把控件恢复到未触碰、未修改的初始状态，提升用户体验
                control.$setPristine();
                control.$setUntouched();
            }); 
        });
    };
}]);

为什么这样能行？ #

• 当你修改$scope.nums的值后，Angular会在当前函数执行完毕后启动脏检查循环，同步更新所有绑定的表单控件状态（比如$dirty、$invalid这些）。
• 用$timeout包裹重置有效性的代码，会让这部分逻辑延迟到脏检查循环完成之后执行，这样就不会被模型更新带来的状态变化覆盖，确保重置操作真正生效。
• 加上$setPristine()和$setUntouched()是为了让表单完全回到初始状态，用户看不到残留的“已修改”或“已触碰”的样式（比如输入框的边框颜色）。

你的按钮代码不需要改动，保持原样即可：

<input type="submit" ng-click="clear();" value="Clear" />

现在点击一次Clear按钮，就能同时完成模型清空和表单有效性重置啦！

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