Menu
I've included angular-messages.js as shown in my index below. When I run my app, I get the error:
Error: [$compile:ctreq] Controller 'ngMessages', required
by directive 'ngMessage', can't be found!
My registration.js is very simple and I believe I did the dependency correctly. it looks as follows:
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 I get DI 100%. I assumed that ngMessages is injected because of the array inclusion but since I'm not using it in the controller I don't need to mention it in the function.
777
ngMessages here is required in your module, but not your controller.
ngMessages is a directive not a service, look at this documentation
this is how 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: basically for ngMessages because it is a directive you only need to add the module that directive was defined into the app module dependencies, and don't need to inject anything into the controller. Maybe you can get the error messages to be bound from the controller.
Hope that helps.
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
