I developed a function that calculates the percentage of form completion.
However, I am encountering an issue where when editing an existing record, the validation does not kick in until data is edited in one of the inputs.
<div ng-form="dtform" class="container-fluid form-horizontal" ng-cloak>
<fieldset ng-form="requestor_tab"> ... </fieldset>
<fieldset ng-form="some_tab"> ... </fieldset>
</div>
The events triggering the function are:
$scope.$watch("data", () => { calculateCompleted(); }, true);
$scope.$watch("dtform.$valid", () => calculateCompleted());
Function for calculation:
let calculateCompleted = () => {
let errors = 0;
let success = 0;
settings.tabs.forEach(tab => {
// The issue lies here: $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 mathematical calculations
return percentage;
};
It seems that $scope.dtform[tab].$$success is undefined while running this function, although it has a defined value when checked in the console.
I suspect that there might be an additional trigger missing. Can anyone suggest what this trigger could be?
Thank you
Edit: I know a solution can be to trigger this function from the template
<div ng-hide="checkCompetion()"></div>