How to show a validationmessage on the validation of two fields and make the form invalid

Question

I want to make a validation on the sum of two fields, both are numeric input, but the total must not be larger than 100.

So I thought I'd make a hidden input which reads the total from my controller, and create a custom validationdirective to check the value to be <= 100 and create a span which checks whether that input is valid or not and then show/hide it.

But the input is bound to a function (which adds the two fields together) on my controller, so I can not use ng-model. So I thought I use ng-bind, but then my validation directive complained about this: require: 'ngModel',, because I don't have a ng-model anymore.

So I deleted that require, but then the ctrl.$validators was not present anymore and that gave me an error....

And now I am lost :-)

My validationdirective is this:

angular.module(Config.name).directive('maxvalue', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.maxvalue = function (modelValue, viewValue) {
                //validation here

            };
        }
    };
});

Can you give my a way to solve this?

EDIT

maybe my question is broader: I have more of these like alidations, where the validation is not tied to a single input field. I also have two buttons which a user can click (sort of a radio button, but then implemented with 2 buttons). I also want to show a span when no button is clicked + make the form invalid.

But I do not know how to say to the form 'you are invalid' neither from the form itself neither from the controller.

Why not use ngChange on both fields with method that will check if sum of both models exceeds 100 and then set form and both fields invalid (so user knows what's wrong) — maurycy
– maurycy, Commented Feb 16, 2016 at 9:53
How can I set the form and field invalid? Do you have some code? I don't know how to set the form and field invalid, apart from doing it from a directive.... — Michel
– Michel, Commented Feb 16, 2016 at 10:06

Stepan Kasyanenko · Accepted Answer · 2016-02-16 10:55:42Z

For set form or input valid\invalid you can use $setValidity.

But i recommend use special library use-form-error.

Example of using you can see on jsfiddle

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleController', function($scope) {

  });

.errors {
  color: maroon
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <form name="myForm">
      <label>Enter your digit 1:</label>
      <input type="text" ng-model="digit1" name="myDigit1" />
      <br>
       <label>Enter your digit 2:</label>
      <input type="text" ng-model="digit2" name="myDigit3"  />

     
       <div  use-form-error="isGeaterHundred" use-error-expression="digit1*1+digit2*1>100" ng-messages="myForm.$error" class="errors">
        <div ng-message="isGeaterHundred">Your sum is greated then 100</div>
      </div>
      <input type="submit" ng-disabled="myForm.$invalid">
    </form>
    
  </div>
</div>

Collectives™ on Stack Overflow

How to show a validationmessage on the validation of two fields and make the form invalid

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