L1ghtk3ira L1ghtk3ira - 3 months ago 39
AngularJS Question

Angular JS ng-Messages not displaying error messages

Hi I am new to form validation using Angular JS so I looked around a lot and found one that was a nice tutorial. The tutorial can be found here. I know there are a few posts on stack here about

ng-messages
however I reviewed them and they do not seem to pertain to my issue.

I have installed
ng-messages
using bower and am running it with
grunt
. There are no error however my validation messages do not seem to fire off.

My html is as follows:

<form name="myForm" novalidate>
<fieldset>

<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<!--<div ng-message="required" >SRF # is required.</div>-->
<div ng-message="minlength" >SRF Number is too short.</div>
<!--<div ng-message="maxlength">SRF Number is too long.</div>-->
</div>
</div>
</fieldset>
</form>


Part of my app.JS is as follows:

angular
.module('myApp', [
// Angular
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'myApp.home',
'restangular',
'ngMessages'
])


Part of my controller is as follows:

(function() {
'use strict';
angular.module('myApp.home', [
'ui.router',
'myApp.myFactory',
'ngMessages'
])
.config(homeConfig)
.controller('homeCtrl', home);

homeConfig.$inject = ['$stateProvider'];
home.$inject = ['$http','myFactory','$timeout'];

function home($http,myFactory,$timeout) {
...
}


What I have looked at and tried:


  1. ngMessages/angular validation not working

  2. ng-messages is not working

  3. https://github.com/angular/material/issues/6440

  4. https://github.com/angular/material/issues/2820

  5. https://docs.angularjs.org/api/ngMessages

  6. http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html



Some in the list are tutorials while others are posts on Stack.
ngMessages/angular validation not working.

Thanks in advance, any help is greatly appreciated as I do not understand why it does not work. All sites I have seen look to be implementing the same way.

Answer

All we need to do is adding ng-model to our input.

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

In short, without ng-model on <input> element Angular does not care about it.

Look at working snippet below.

<!DOCTYPE html>
<html lang="en">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script>

    <script>
      var app = angular.module('app', ['ngMessages']);
      app.controller('RegistrationScreenController',  function() {});
    </script>
    
  </head>

  <body ng-app="app" ng-controller="RegistrationScreenController">
    
    <form name="myForm" novalidate>
      <fieldset>
        <div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
          <label for="client">SRF #: *</label>
          <input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
          <div ng-messages="myForm.clientNumber.$error">
            <div ng-message="required" >SRF # is required.</div>
            <div ng-message="minlength" >SRF Number is too short.</div>
            <div ng-message="maxlength">SRF Number is too long.</div>
          </div>
        </div>
      </fieldset>
    </form>
  </body>

</html>