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;


    }

});

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

1 个答案: