AngularJS监视ngForm引用数组以了解$ valid中的更改

Question

I have an array of nested subforms (ngForm) within my main form. Each subform is registered with my form service by pushing them onto an array, and each of the subforms represent a single document within a document package (the entire array). I'm building a progress directive using Google Charts, and I want to know when one of the subforms becomes $valid.

I've looked into $watch, and know that I can deep watch by setting the third parameter to true, to be notified of any changes within the array to the validity of the subform. Is this the best way to do this? The deep changes that might occur could be anything, and it seems expensive. Can I watch just subFormArray[index].$valid for changes?

$scope.$watch('subFormsArray', 
    function( newSubFormsArray, oldSubFormsArray, scope ){
        // loop through newSubFormsArray and check $valid on each index
        // to get new number of completed subforms for progress directive
    }, true);

I could also just set a watch on each subform.$valid using a function and on any changes update the progress chart.

for( var i = 0; i < $scope.subFormsArray; i++ ) {
    $scope.$watch( function() {
        return $scope.subFormsArray[i].$valid;
    },
    function( newValidity, oldValidity ) {
        // loop through newSubFormValidityArray and check $valid on each index
        // to get new number of completed subforms for progress directive
    });
}

Maybe using $watchGroup? From the docs I can't quite figure out, but it seems to say that I could do this:

$scope.$watchGroup( function() {
    var subFormValidity = [];
    for( var i = 0; i < $scope.subFormsArray; i++ ) {
        // create validity array
        subFormValidity.push( $scope.subFormsArray[i].$valid );
    }
    return subFormValidity;
},
function( newSubFormValidityArray ) {
    // loop through newSubFormValidityArray and check $valid on each index
    // to get new number of completed subforms for progress directive
}); 

Would this even work? and which solution would be the best choice?

UPDATE Using the first option I can't seem to get the watch to work on changes to form validity, any idea why it isn't working? Using console.log I can see it being hit onload a bunch, and initializing properly, but afterwards it doesn't get triggered. But if I hardcode the update function, the chart is correctly set, so it is just the $watch that is causing issues.

$scope.$watch( function() {
     return FormService.getSubForms();
}, function ( newSubForms, oldSubForms ) {

    // Total forms available, and default amount of valid subforms
    var totalForms = FormService.getSubForms().length;
    var totalValid = 0;

    // Check subforms for changes to validity
    angular.forEach( newSubForms, function( subForm, key ) {

        if( subForm.$valid ) { 
            totalValid++; 
        }
    });

    // Update number of complete, and incomplete forms
    self.updateChartData( totalValid, totalForms-totalValid );
}, true );

FINAL Got it to work, created an array of expressions based on subform validity instead of passing an array of subforms straight from my service, I believe this is what @PinhasHouri was saying? Not sure why it didn't work the first way, since I was doing a deep watch. Can anyone explain why? Either way it works.

$scope.$watch( function() {

     var subforms = [];

     angular.forEach( FormService.getSubForms(), function( subform, key ) {
          this.push( subform.$valid );
     }, subforms);

     return subforms;
}, function ( newSubForms, oldSubForms ) {

    // Total forms available, and default amount of valid subforms
    var totalForms = FormService.getSubForms().length;
    var totalValid = 0;

    // Check subforms for changes to validity
    angular.forEach( newSubForms, function( subForm, key ) {

        if( subForm.$valid ) { 
            totalValid++; 
        }
    });

    // Update number of complete, and incomplete forms
    self.updateChartData( totalValid, totalForms-totalValid );
}, true );

Answer 1

I will post this as an answer, since in the comments it begun to be a little bit too long.

It's very close to what I was proposing, I wanted to do like this:

    $scope.$watch(function() {
       //count how many valids you have
        var totalForms = FormService.getSubForms().length;
        var totalValid = 0;

        // Check subforms for changes to validity
        angular.forEach( newSubForms, function( subForm, key ) {

          if( subForm.$valid ) { 
              totalValid++; 
          }
        });
        return totalValid;
    }, function(newCount, oldCount) {
       self.updateChartData(newCount, totalForms - nowCount);
    });

As a rule of thumb I try to avoid as much as I can deep watching, as it incurs an overhead of deep cloning an item and comparing each of it's memebers on each watch call (to appreciate how many times this gets called in an app, try putting console.log before returning totalValid).

If you also change the chart when the valid count is the same, then you will have to come up with a bit different logic, but the principle is the same.