Controller 'ngMessages', required by directive 'ngMessage', can't be found

Question

Hi I developing an app using angularjs (1.5.0) following jonhpapa rules. Also I use angular material 1.0.6.

I have a problem when I add the module 'ngMessages'.

I installed the lib angular-messages 1.5.1.

When I add the module to use I have the following error on console.

Error: [$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found!
http://errors.angularjs.org/1.5.0/$compile/ctreq?p0=ngMessages&p1=ngMessage
    at http://localhost:3000/bower_components/angular/angular.js:68:12
    at getControllers (http://localhost:3000/bower_components/angular/angular.js:8817:19)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8982:33)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8226:13)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8973:24)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8226:13)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8229:13)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8229:13)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8229:13)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8229:13) <div data-ui-view="" class="ng-scope">

This view at this moment doesn't have controller. The view contains:

         <md-input-container>
            <label>First name</label>
            <input name="firstName" 
              ng-model="vm.user.firstName"
              md-maxlength="30" 
              required>
              <div ng-messages="vm.user.firstName.$error">
                <div ng-message="md-maxlength">Field has to be less than 30 characters long.</div>
                <div ng-message="required">Field required</div>
              </div>
          </md-input-container>

Thanks in advance, regards.

Answer 1

Your ng-messages needs to contain the form's name and then the input field's name.

So: formName.fieldName.$error

Then the ng-message needs to contain the validation rule (like you have).

If you don't have a form surrounding your md-input-container you need to add one.

The form name can be whatever you want.

Something similar to this:

<form name="vm.details">

    <md-input-container>
        <label>First name</label>
        <input name="firstName" 
          ng-model="vm.user.firstName"
          md-maxlength="30" 
          required>
          <div ng-messages="vm.details.firstName.$error">
            <div ng-message="md-maxlength">Field has to be less than 30 characters long.</div>
            <div ng-message="required">Field required</div>
          </div>
      </md-input-container>

</form>

Answer 2

To fix the problem replace the following:

ng-message by ng-messages

It is a typing error.