Angularjs check and compare two input field values

Question

I have 3 sections of input fields separated with different heading(Laser Pass, The Giggsy, The set up) generated from a JSON array. Here is what it looks like:

I want to compare two fields Score and Attempts and show an error message if the value of Score is larger then Attempts. Something like this:

But some section like, The Giggsy have a different type of input fields and no need to compare/check those fields. Only where it has SCORE and ATTEMPTS should compare.

When the section is filled up Show success message like this:

What I can do to make those things in angular way. Here is what I've done so far: PLUNKER

HTML:

<div class="row" ng-repeat="all in options">

   <h4> {{ all.name}} </h4>
   <div class="col-sm-5ths" ng-repeat="measurement in all.measurements">
      <div class="form-group no-margin form-oneline">
        <label style="width: 100%">{{ measurement.name }}</label>
        <input ng-model="measurement.value" type="{{ measurement.type }}" min="{{ measurement.min }}" max="{{ measurement.max }}"  class="form-control display-inline" required>
        <label style="width: 100%">{{ measurement.scale }}</label>
      </div>
    </div>
    <span style="color:red;" ng-show="testDataFieldWarning(options.measurements)">
      Score can't be larger then Attempts
    </span>
    <span style="color:Green;" >
      Done!!
    </span>
  </div>
  <button type="submit" style="margin-top:50px;" ng-disable="">Submit</button>

JS

$scope.testDataFieldWarning = function (measurements) {
    var score = 0 , attempts = 0;

    angular.forEach(measurements, function(measurement) {
      if((measurement.name) == 'Score'){
        score  = measurement.value;
      }
      if((measurement.name) == 'Attempts'){
        attempts  = measurement.value;
      }
    });
    return attempts < score;
  }

   $scope.testDataFieldValidate = function (measurement) {

      var isInvalid = false;
      angular.forEach(measurement, function(v) {
        if(typeof (v.value) == 'undefined'){
          isInvalid = true;
        }
      });

      return (isInvalid);
    }

Sorry for bad English and explanation.

Bennett Adams · Accepted Answer · 2015-12-30T16:26:24.487

1

I forked your plunker and added some additional validating functions...

  function isScoreField(measurements) {
    if (measurements[1].name === 'Score' && measurements[2].name ==='Attempts') {
      return true;
    } else {
      return false;
    }
  }

  $scope.testDataFieldInvalid = function (measurements) {
    if (isScoreField(measurements) && parseInt(measurements[2].value) < parseInt(measurements[1].value)) {
      return true;
    } else {
      return false;
    }
  };

  $scope.testDataFieldsEntered = function (measurements) {
    if (measurements[1].value && measurements[2].value) {
      return true;
    } else {
      return false;
    }
  };

... that will conditionally show/hide the done/error messages.

<span style="color:red;" ng-show="testDataFieldInvalid(all.measurements)">
  Score can't be larger than Attempts
</span>
<span style="color:Green;" ng-show="testDataFieldsEntered(all.measurements) && !testDataFieldInvalid(all.measurements)">
  Done!!
</span>

Hope this helps!

edited Dec 30 '15 at 16:26

answered Dec 30 '15 at 16:07

Bennett Adams

1,808
14
17

Thanks for your answer! But sometimes it's giving wrong warning. i.e if I add 12 in the score and 2 in the attempts it showing me Done! instead of : Score can't be larger than Attempts – Raihan Dec 30 '15 at 16:21
1

True, it's comparing the values as if they were strings, so you just have to change the conditional to `parseInt(measurements[2].value) < parseInt(measurements[1].value)`. I updated the plunker accordingly. – Bennett Adams Dec 30 '15 at 16:23
Now it's perfect ! Thanks a lot – Raihan Dec 30 '15 at 16:25
Just one question here! How I can keep the submit button disable until all fields are done ! – Raihan Dec 30 '15 at 16:39
Thanks, I'm trying with your suggestion. If I can solve I'll let you know. – Raihan Dec 30 '15 at 18:06
@Raihan, I updated the [plunkr](http://plnkr.co/edit/Y8JJA7CnYBX4abeFHoL0?p=preview) again with date validation (just checks to see that the date is not exactly equal to the default value from your json object). Now the 'Done!!' message only appears when all three inputs in a given section are valid, and the submit button only when all the fields are valid (and by the way, you should use the `ng-disabled` attribute -- maybe `ng-disable` was just a typo above). – Bennett Adams Dec 30 '15 at 20:59

Angularjs check and compare two input field values

1 Answers1

Linked