Angular dynamic validation based on other data

Question

I have an ng-repeat that spits out data and inputs that can be made to fix the data. If a portion of each repeat is of a certain value, I need to restrict the ways the input can be used.

So, for instance, there is a list of equipment, and for service type 1511, the maximum quantity is 1. They need to fix it, and I want to ensure that they don't type in a number that's invalid that will cause another issue to arise.

How can this be done?

edit: Updated jsfiddle and below code to be pared down to just the repeated bits.

Example jsfiddle: https://jsfiddle.net/AKarstaedt/vfuj8sjt/

HTML:

<div ng-app="myApp" ng-controller="TaskActivityCtrl" class="container-fluid">
  <form novalidate name="taskActivityForm">
    <div class="row" data-ng-repeat="service in bill.services">
      <div data-ng-repeat="serviceCharge in service.serviceCharges">
        <div class="col-md-12 table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-3">Service Code</th>
                <th class="col-md-2">Attribute</th>
                <th class="col-md-2">Billed/Invoiced Value</th>
                <th class="col-md-5">Updated Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">{{ service.serviceCode }}
                </td>
                <td>Quantity</td>
                <td class="existQuantity">{{ serviceCharge.quantity }}</td>
                <td>
                    <input type="number" class="form-control" placeholder="New quantity" data-ng-model="serviceCharge.newQuantity" min="0">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>

Controller:

 angular.module('myApp', [])
      .controller('TaskActivityCtrl', function($scope) {
        $scope.bill = {
          "services": [{
            "billableIndicator": true,
            "serviceCode": "1511",
            "serviceCharges": [{
              "equipment": {
                "equipmentInitial": "TTEX",
                "equipmentNumber": "988172"
              },
              "quantity": 2,
              "rate": 5000,
              "amount": 10000,
              "unitTypeCode": "PC",
              "billableIndicator": true,
              "billableDisplay": "Y",
              "suspendIndicator": false
            }, {
              "equipment": {
                "equipmentInitial": "TTEX",
                "equipmentNumber": "90099"
              },
              "quantity": 1,
              "rate": 7888,
              "amount": 7888,
              "unitTypeCode": "PC",
              "billableIndicator": true,
              "billableDisplay": "Y",
              "suspendIndicator": false
            }]
          }, {
            "billableIndicator": true,
            "serviceCode": "1530",
            "serviceCharges": [{
              "equipment": {
                "equipmentInitial": "TTEX",
                "equipmentNumber": "988172"
              },
              "quantity": 25,
              "rate": 200,
              "amount": 5000,
              "unitTypeCode": "PM",
              "billableIndicator": true,
              "billableDisplay": "Y",
              "suspendIndicator": false
            }]
      }],
    }
  });

Answer 1

Here is a simple positive integer validation on your code. I have made slight changes to html and js. But you need to modify it to suit your needs.

The idea is that user will eventually press some kind of submit button, and this button is attached to an ng-click event. In this ng-click event handler, you will perform the validation before submitting changes.

Fiddle here

Html:

<div ng-app="myApp" ng-controller="TaskActivityCtrl" class="container-fluid">
  <form novalidate name="taskActivityForm">
    <div class="row" data-ng-repeat="service in bill.services">
      <div data-ng-repeat="serviceCharge in service.serviceCharges">
        <div class="col-md-12 table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-3">Code</th>
                <th class="col-md-2">Attribute</th>
                <th class="col-md-2">Value</th>
                <th class="col-md-5">Updated Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td rowspan="3">{{ service.serviceCode }}
                </td>
                <td>Quantity</td>
                <td class="existQuantity">{{ serviceCharge.quantity }}</td>
                <td>
                  <input type="number" class="form-control" placeholder="New quantity" data-ng-model="serviceCharge.newQuantity" min="0">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <button ng-click="submitData()">
    Submit Changes
    </button>
  </form>
</div>

Javascript:

angular.module('myApp', [])
  .controller('TaskActivityCtrl', function($scope) {
    $scope.bill = {
                    "services": [{
                      "billableIndicator": true,
                      "serviceCode": "1511",
                      "serviceCharges": [{
                        "equipment": {
                          "equipmentInitial": "TTEX",
                          "equipmentNumber": "988172"
                        },
                        "quantity": 2,
                        "rate": 5000,
                        "amount": 10000,
                        "unitTypeCode": "PC",
                        "billableIndicator": true,
                        "billableDisplay": "Y",
                        "suspendIndicator": false
                      }, {
                        "equipment": {
                          "equipmentInitial": "TTEX",
                          "equipmentNumber": "90099"
                        },
                        "quantity": 1,
                        "rate": 7888,
                        "amount": 7888,
                        "unitTypeCode": "PC",
                        "billableIndicator": true,
                        "billableDisplay": "Y",
                        "suspendIndicator": false
                      }]
                    }, {
                      "billableIndicator": true,
                      "serviceCode": "1530",
                      "serviceCharges": [{
                        "equipment": {
                          "equipmentInitial": "TTEX",
                          "equipmentNumber": "988172"
                        },
                        "quantity": 25,
                        "rate": 200,
                        "amount": 5000,
                        "unitTypeCode": "PM",
                        "billableIndicator": true,
                        "billableDisplay": "Y",
                        "suspendIndicator": false
                      }]
                    }],
                  }

        $scope.submitData = function(){
        var isValid = true;
        for(var i in $scope.bill.services){   
        var service = $scope.bill.services[i];      
        for(var j in service.serviceCharges){
            var serviceCharge = service.serviceCharges[j];

          //check that newQuantity is a positive integer
          //if is positive integer
          alert(parseInt(serviceCharge.newQuantity) + " vs " + serviceCharge.newQuantity);
          if(parseInt(serviceCharge.newQuantity) == serviceCharge.newQuantity && 
              serviceCharge.newQuantity >= 0){
            //do nothing?
          } else {
            isValid = false;
            break;
          }
        }
        if(!isValid) break;
      }

      isValid? alert("values validated") : alert("validation failed");
    }
  });