angular validation, add class to input field when validation fails

Question

Trying to add specific class to input if validation fails. below is a simple testing code.

controller:

vm.emsg = '';
if ((parseFloat(vm.sum1) + parseFloat(vm.sum2)) < 100) {
    vm.emsg = 'Hey, sum should be 100.';

   /*something to add class to input*/

    return false;
}

template:

<form method="POST" enctype="multipart/form-data" ng-submit="vm.save($event)">
    <input type="text" ng-model="vm.sum1">
    <input type="text" ng-model="vm.sum2">
    <div class="error-message" ng-if="vm.emsg">
        {[vm.emsg]}
    </div>
</form>

Do you have a <form> element around the inputs? Usually the form drives the validation. Like if you had <form name="inputForm"> you could check your inputs as a property off of them with ng-class — JDev518
– JDev518, Commented Apr 4, 2017 at 20:57

cnorthfield · Accepted Answer · 2017-04-04 21:16:09Z

1

An option is to use the ngClass directive evaluating your expression, you can also evaluate your expression to display an appropriate message like so:

// app.js
(function() {

  'use strict';

  angular.module('app', []);

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = [];

  function MainController() {

    var vm = this;

  }

})();

.error-message {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as vm">
  <input type="number" ng-model="vm.sum1">
  <input type="number" ng-model="vm.sum2">
  <div ng-class="{'error-message': vm.sum1 + vm.sum2 !== 100}">
    {{vm.sum1 + vm.sum2 !== 100 ? 'Hey, sum should be 100.' : ''}}
  </div>
  {{vm.sum1 + vm.sum2}}
</div>

Or you can use the ngIf directive to display your message:

// app.js
(function() {

  'use strict';

  angular.module('app', []);

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = [];

  function MainController() {

    var vm = this;

    vm.sumsInvalid = sumsInvalid;

    function sumsInvalid() {

      // simply return true to display the error message via the ngIf directive
      return parseFloat(vm.sum1) + parseFloat(vm.sum2) !== 100;

    }

  }

})();

.error-message {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as vm">

  <input type="number" ng-model="vm.sum1">

  <input type="number" ng-model="vm.sum2">

  <div class="error-message" ng-if="vm.sumsInvalid()">
    Hey, sum should be 100.
  </div>

  <p>{{vm.sum1 + vm.sum2}}</p>

</div>

edited Apr 4, 2017 at 21:16

answered Apr 4, 2017 at 21:04

cnorthfield

3,51119 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1751287 Over a year ago

what I am trying to do is to add class to inputs, alongside message, though would prefer to handle it within controller if possible

user1751287 Over a year ago

if you look at my code I use ng-if, but in my example without function

Collectives™ on Stack Overflow

angular validation, add class to input field when validation fails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related