All geek questions in one place

Bug from Angular, which requires AngularJS 1.3 for ngMessages injection

I have included angular-messages.js as shown in my index below. When I launch the application, I get an error message:

Error: [$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found!

My registration.js is very simple, and I believe that I made the dependency correctly. it looks like this:

 angular.module('registrationController', ['ngMessages']).controller('RegistrationCtrl', ['$scope','ngMessages', function ($scope) { var vm = this; }]); <script src="js/angular.js"></script> <script src="js/angular-messages.js"></script> <script src="js/angular-route.js"></script> <script src="js/angular-resource.js"></script> <script src="app/app.js"></script> <script src="app/controllers/registration.js"></script>

-

 <form novalidate="novalidate" ng-submit="registerForm()" ng-controller="RegistrationCtrl">

I'm relatively new to angular, so I'm not quite sure that I am getting 100% DI. I assumed that ngMessages is introduced due to the inclusion of the array, but since I do not use it in the controller, I do not need to mention it in the function.

+5
source share
2 answers

ngMessages is required here in your module, but not in your controller.

ngMessages is a directive, not a service, look at this documentation

so you define it as a requirement for your angularJs module

  angular.module('myModule', ['ngMessages']);

then you can use in your html like this:

 <form name="myForm"> <input type="text" ng-model="field" name="myField" required minlength="5" /> <div ng-messages="myForm.myField.$error"> <div ng-message="required">You did not enter a field</div> <div ng-message="minlength">The value entered is too short</div> </div> </form>

EDIT: this is a working sample

1- Index.html should be:

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body ng-app="registerApp" ng-controller="RegistrationCtrl"> <form name="myForm"> <input type="text" ng-model="field" name="myField" required minlength="5" /> <div ng-messages="myForm.myField.$error"> <div ng-message="required">You did not enter a field</div> <div ng-message="minlength">The value entered is too short</div> </div> </form> <script src="Scripts/angular.js"></script> <script src="Scripts/angular-messages.js"></script> <script src="app.js"></script> </body> </html>

2- app.js

 angular .module('registerApp', ['ngMessages']) .controller('RegistrationCtrl', ['$scope', function ($scope) { var vm = this; }]);

Edit 2: mainly for ngMessages, because it is a directive, you only need to add the module that was defined in the dependencies of the application module, and you do not need to enter anything into the controller. Perhaps you can get error messages from the controller.

Hope this helps.

+2
source

I was getting exactly the same error due to typical / incorrect syntax.

Note ng-message instead of ng-messages in the first element:

 <div ng-message="myForm.myField.$error"> <div ng-message="required">You did not enter a field</div> </div>
-1
source

Source: https://habr.com/ru/post/1205523/

More articles:


All Articles