Im trying to use ng-messages for UI validation feedback inside a UI Bootstrap modal. (http://angular-ui.github.io/bootstrap/#/modal).
Every time the modal is opened I get this error.
[$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found!
Everything is setup right as said here(https://docs.angularjs.org/api/ngMessages). All angularjs files are referenced, the messages module dependency is added to the main module and the directive is used as it should but I still get this error. It happens if I use both ng-message or ng-messages-include.
Here's my modal's HTML content template:
<form name="formTrocaDeSenha" data-ng-submit="vm.submit(formTrocaDeSenha.$valid)" novalidate>
<div class="form-group">
<label class="control-label">Senha atual:</label>
<div>
<input type="password" name="senhaAntiga" class="form-control" style="width: 256px" data-ng-model="vm.senhaAntiga" required minlength="8" autofocus>
</div>
<div ng-messages="formTrocaDeSenha.senhaAntiga.$error"></div>
<!--data-ng-messages-include="/app/mensagensValidacao.html"></div>-->
<div ng-message="required">Campo obrigatório</div>
<div ng-message="minlength">Mínimo de 8 caracteres</div>
</div>
<button class="btn btn-lg btn-info" type="submit">Enviar</button>
<button class="btn btn-lg btn-info" type="button" data-ng-click="vm.cancelar()">Cancelar</button>
<br />
<div style="width:50%" data-ng-show="vm.message != ''" class="alert alert-danger">{{vm.message}}</div>
</form>
I checked the messges-include directive and it already trys to find the controller in parent scope:
.directive('ngMessagesInclude',['$templateRequest', '$document', '$compile', function($templateRequest, $document, $compile) {
return {
restrict: 'AE',
require: '^^ngMessages', // we only require this for validation sake
link: function($scope, element, attrs) {}
}
};
Heres a plunk from Scott Allen that I took as a guide that works just fine: /FipgiTUaaymm5Mk6HIfn (I can't post more then 2 links)
I guess it's something with the modal. Anyone have an idea of what can be leading to this error?
You've closed the tag with the ng-messages
directive before declaring your tags with the ng-message
directive:
<div ng-messages="formTrocaDeSenha.senhaAntiga.$error"></div>
<div ng-message="required">Campo obrigatório</div>
<div ng-message="minlength">Mínimo de 8 caracteres</div>
You're supposed to nest them, the correct way:
<div ng-messages="formTrocaDeSenha.senhaAntiga.$error">
<div ng-message="required">Campo obrigatório</div>
<div ng-message="minlength">Mínimo de 8 caracteres</div>
</div>
Knowing that, i bet the error message makes more sense now ;)
Controller 'ngMessages', required by directive 'ngMessage', can't be found!