加载数据后不会触发表单验证

Question

我有一个计算表单完成百分比的函数。

编辑现有记录时，会加载并呈现数据，但不会启动验证。 如果我在其中一个输入中编辑数据，它就会被触发并开始工作。

<div ng-form="dtform" class="container-fluid form-horizontal" ng-cloak>
    <fieldset ng-form="requestor_tab"> ... </fieldset>
    <fieldset ng-form="some_tab"> ... </fieldset>
</div>

触发函数的事件

$scope.$watch("data", () => { calculateCompleted(); }, true);
$scope.$watch("dtform.$valid", () => calculateCompleted());

计算函数：

let calculateCompleted = () => {
    let errors = 0; 
    let success = 0;
    settings.tabs.forEach(tab => {

        // Here is the problem: $scope.dtform[tab].$$success is undefined.
        if ($scope.dtform && $scope.dtform[tab] && $scope.dtform[tab].$$success && $scope.dtform[tab].$$success.required)
            success += $scope.dtform[tab].$$success.required.length;
    });
    // some math logic
    return percentage;
};

运行此函数时，$scope.dtform[tab].$$success 似乎未定义，但当我在控制台中检查值时，它已定义并具有值。

我好像漏掉了一个额外的触发器，有人能告诉我这是什么触发器吗？

谢谢

编辑： 我知道可以通过从模板触发这个功能来解决 <div ng-hide="checkCompetion()"></div> 但我想知道是否有更优雅的解决方案

Answer 1

如果没有一个字段是有效的，那么它可能没有定义任何tab 对象。

尝试添加这个：

if($scope.dtform.hasOwnProperty(tab)){ 

至此：

settings.tabs.forEach(tab => {

    // Check if it works adding it here.
    if($scope.dtform.hasOwnProperty(tab)){


        if ($scope.dtform && $scope.dtform[tab] && $scope.dtform[tab].$$success && $scope.dtform[tab].$$success.required)
            success += $scope.dtform[tab].$$success.required.length;


    }

});