Validate a group of form fields with AngularJS

Question

Working with Angular 1.5.11

I have a html form with several fileds like :

<div ng-app="validationApp" ng-controller="mainController">
  <div class="container">
    <div class="row">
      <form name="weightForm" ng-submit="submitForm()" novalidate>
        <input class="input" data-required="" fn-restrict-integer="" maxlength="4" name="weight1" id="weight1" ng-model="weight1" fn-min-value="1" fn-max-value="9999" />
        <input class="input" data-required="" fn-restrict-integer="" maxlength="4" name="weight2" id="weight2" ng-model="weight2" fn-min-value="1" fn-max-value="9999" />
        <input class="input" data-required="" fn-restrict-integer="" maxlength="4" name="weight3" id="weight3" ng-model="weight3" fn-min-value="1" fn-max-value="9999" />

        <div>
          <dl aria-invalid="{{totalWeightIsAboveLimit()}}">
            <p class="input__error">total weight above limit</p>
          </dl>          
        </div>

        <button type="submit" class="btn btn-primary" ng-disabled="weightForm.$invalid">Submit</button>
      </form>
    </div>
  </div>
</div>

How can I build a validation that considers the values of the three fields as a group, in this case the sum of the fields entered.

I have built a validation function function to toggle the message, but I don't know how to make the form invalid, based on the outcome of this function.

But I don't know how to make the whole form inavalid to prevent the submit.

Daniel Manta · Accepted Answer · 2021-01-18 18:21:32Z

Using custom validator for calculating total weight. I have added a valid-weight directive to the input tags and implemented myValidation() function. In this scenario, Angularjs creates an array for scope.weightForm.$error.invalidWeight with a maximum of 3 errors, one for each input tag.

var app = angular.module('validationApp', []);
app.controller('mainController', function($scope) {
  $scope.maxWeight = 99;
  $scope.weights = {};
  $scope.totalWeight = 0;
});
app.directive('validWeight', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        scope.weights[attr.id] = Number(value) || 0;
        scope.totalWeight = Object.values(scope.weights).reduce(function(a, b) {
          return a + b;
        });
        let valid = scope.totalWeight <= scope.maxWeight;
        mCtrl.$setValidity('invalidWeight', valid);
        if (valid && scope.weightForm.$error.invalidWeight) { 
          /* clear any previous error on other input tags 
             that were not edited after last change */
          scope.weightForm.$error.invalidWeight = undefined;
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});

.input__error {
  color: red;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
  <div class="container">
    <div class="row">
      <p>Total weight: {{totalWeight}}</p>
      <p>Maximum weight: {{maxWeight}}</p>
    </div>
    <div class="row">
      <form name="weightForm" ng-submit="submitForm()" novalidate>
        <input class="input" data-required="" fn-restrict-integer="" maxlength="4" name="weight1" id="weight1" ng-model="weight1" fn-min-value="1" fn-max-value="9999" valid-weight />
        <input class="input" data-required="" fn-restrict-integer="" maxlength="4" name="weight2" id="weight2" ng-model="weight2" fn-min-value="1" fn-max-value="9999" valid-weight />
        <input class="input" data-required="" fn-restrict-integer="" maxlength="4" name="weight3" id="weight3" ng-model="weight3" fn-min-value="1" fn-max-value="9999" valid-weight />

        <div>
          <dl ng-show="weightForm.$error.invalidWeight">
            <p class="input__error">Total weight is above limit.</p>
          </dl>
        </div>
        <p></p>
        <button type="submit" class="btn btn-primary" ng-disabled="weightForm.$error.invalidWeight">Submit</button>
      </form>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Validate a group of form fields with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related