angular: Validate multiple dependent fields

Question

Let\'s say I have the following (very simple) data structure:

$scope.accounts = [{
   percent: 30,
   name: \"Checking\"},
 { percent: 70,
   name: \"Savings\"}]         


        

Answer 1

You can define a single directive that is only responsible for this check.

And here's the simple directive's code.

app.directive('sumUpToHundred', function() {
  return {
    scope: {
      accounts: '<'
    },
    require: {
      formCtrl: '^form'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    controller: function() {
      var vm = this;

      vm.$doCheck = function(changes) {
        var sum = vm.accounts.map((a)=> a.percent).reduce((total, n)=> total + n);
        if (sum !== 100) {
          vm.formCtrl.$setValidity('sumuptohundred', false);
        } else {
          vm.formCtrl.$setValidity('sumuptohundred', true);
        }
      };
    }
  };
});

Here's a plunker.