angularJs Form validation with dynamic error message

Question

I want validate a form where for each input may have many error messages as per input. I want to write those error message from javaScript.

HTML

<input name="username" ng-model="user.username" type="text" placeholder="Username" required>
<div class="field-message" ng-messages="frm.username.$error" ng-if='frm.username.$dirty' ng-cloak>
     <div ng-message="required">Username is required</div>
</div>

JS

angular.module('DemoApp', ['ngMessages']);    
angular.bootstrap(document.getElementById('demoApp'), ['DemoApp']);

In the above code ng-message directive have error message that will be shown if input is not valid. If there are so many case to validate and each case have different error message then multiple ng-message have to add in html for particular input control.

I want to only input tag in html and error message to be come from javascript.

How can I achieve this?

Answer 1

See this question: How to add custom validation to an AngularJS form?

To summarize:

You can use ui-validate

OR

You can just create custom validation, like so (copied from the answer in the original question):

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');

          //For DOM -> model validation
          ngModel.$parsers.unshift(function(value) {
             var valid = blacklist.indexOf(value) === -1;
             ngModel.$setValidity('blacklist', valid);
             return valid ? value : undefined;
          });

          //For model -> DOM validation
          ngModel.$formatters.unshift(function(value) {
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

And here's some example usage:

<form name="myForm" ng-submit="doSomething()">
   <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
   <span ng-show="myForm.fruitName.$error.blacklist">
      The phrase "{{data.fruitName}}" is blacklisted</span>
   <span ng-show="myForm.fruitName.$error.required">required</span>
   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

EDIT: According to OP's request, print only the relevant error:

Plunkr: http://plnkr.co/edit/KN0Oukb8uACvZjtGPUg4?p=preview

 var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $scope.doSomething = function() { alert('Submitted!'); } $scope.getErrors = function() { if ($scope.myForm.fruitName.$error.required) { return 'This field is required'; } else if ($scope.myForm.fruitName.$error.blacklist) { return 'The phrase ' + $scope.data.fruitName + ' is blacklisted'; } } }); app.directive('blacklist', function() { return { require: 'ngModel', link: function(scope, elem, attr, ngModel) { var blacklist = attr.blacklist.split(','); ngModel.$parsers.unshift(function(value) { ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1); return value; }); } }; });

 .invalid { color: red; } .ng-invalid { border-color: red; }

 <!DOCTYPE html> <html ng-app="angularjs-starter"> <head lang="en"> <meta charset="utf-8"> <title>Custom Plunker</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> </head> <body ng-controller="MainCtrl"> <form name="myForm" ng-submit="doSomething()"> <div>Please <u>don't</u> type the words: coconuts, bananas or pears.</div> <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/> <span class="invalid" ng-show="myForm.fruitName.$error">{{getErrors()}}</span> <br/> <button type="submit" ng-disabled="myForm.$invalid">Submit</button> <button type="button" ng-click="getErrors()">Get errors</button> </form> </body> </html>

angularJs Form validation with dynamic error message

Question

1 answers

solution1
2 ACCPTED 2016-02-16 12:04:20

angularJs Form validation with dynamic error message

Question

1 answers

solution1 2 ACCPTED 2016-02-16 12:04:20

solution1
2 ACCPTED 2016-02-16 12:04:20