I was hoping someone could tell me what I was doing wrong with the ngMessages directive. The code I am using is:
<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<div>
<label for="username">Your user name:</label>
<input type="text" id="username" name="username" required placeholder="User name" ng-model="model.user.username">
<div class="help-block" ng-messages="profileForm.username.$error">
<div ng-messages-include="error-messages"></div>
</div>
</div>
<button>submit</button>
</form>
</div>
</div>
</div>
And I created a plunk here ng-messages-include plunk
Been at this for hours.
Thanks
ngMessages does not ship with angular by default. So, when you add ng-messages directive, angular doesn't compile it and nothing happens.
What you should do is add ng-messages to a script tag and add the module ngMessages in your app definition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
var anApp = angular.module('anApp', ['ngMessages']);
See the updated plunker: http://plnkr.co/edit/1CtamfeVCpggDApH9Enp?p=preview
Related
I'm working with an input field with type="number" and I specifically want to use ng-min="0". I'm unsure what I'm doing wrong, but I don't see any message when I enter a value below zero into my field with my current implementation.
I did make sure to include angular messages like so: angular.module('myApp', ['ngMessages']).
My code:
<admin-form name="formName">
<admin-field>
<input
name="formName"
ng-model="$ctrl.model.whatever"
type="number"
min="0" />
<div ng-messages="userForm.formName.$error" style="color: maroon" role="alert">
<ng-message when="min">Value cannot be below 0</ng-message>
</div>
A working plunkr is available here: https://plnkr.co/edit/PUT7r1hNbJrjHDF0vhJd
The PLNKR used obsolete libraries. With updated libraries, it works:
angular.module('myapp', ['ngMessages'])
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
<body ng-app="myapp">
<form name="myForm">
<label>Enter your number:</label><br>
<input type="number" name="myNumber" ng-model="num"
ng-min="0" role="alert">
<div ng-messages="myForm.myNumber.$error" style="color:red">
<div ng-message="min">Your field value is lesser minimum value</div>
</div>
</form>
</body>
I'm trying to get the value from controller to ng-message error but value doesn't come.
In ng-show I can easily bind the value to ng-show but in ng-message, I don't how to do that ...
<body ng-app="BlankApp" ng-cloak ng-controller="ctrl">
<form name="exampleForm" ng-submit="exampleForm.$valid && demo()">
<label>User Message:</label>
<input type="text" name="userMessage" class="form-control" rows="4" ng-model="message" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="submitted1 && exampleForm.userMessage.$error">
<div ng-message=" required">This field is required</div>
<div ng-message=" test">Message must be over 10 characters</div>
<div ng-message="test">{{test}}</div>
</div>
<input type="submit" ng-click="submitted1=true" value="Recharge"/>
</form>
<script type="text/javascript">
angular.module('BlankApp', ['ngMessages'])
.controller('ctrl',function($scope){
$scope.message;
$scope.val=40;
$scope.demo=function(){
if($scope.val >=$scope.message)
$scope.msg="Hello world"
}
else{
$scope.test="pls enter the number 10 to 40"
}
})
</script>
</body>
ng-messages directive should listen on a key/value object. And each ng-message is a key in the previous object. Also test is not a valid key in exampleForm.userMessage.$error object, as described in the official documentation: https://docs.angularjs.org/api/ngMessages
So you can rewrite your code something like this:
<div ng-if="submitted1">
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
</div>
</div>
I have an AngularJS directive with multiple transclusions and one transclusion slot is wrapped by a form.
Everything is working fine except for the form validation messages.
The directive template:
<ng-form name="nbcardform" ng-submit="submit()" novalidate>
<ng-transclude ng-transclude-slot="back"></ng-transclude>
<div class="row">
<div class="col-xs-12">
<button type="submit">Save</button>
</div>
</div>
</ng-form>
Here is an example of the directive usage:
<nb-card>
<nb-card-back>
<input type="text" name="username" ng-model="vm.username" required>
<div ng-messages="nbcardform.username.$error" role="alert">
<div ng-message="required">Required field</div>
</div>
</nb-card-back>
<nb-card>
For some reason the expression nbcardform.username.$error is undefined.
Can someone help me with this?
You should be creating a subform in your directive as it's scope is (likely?) different and it has no idea what nbcardform is.
<nb-card ng-form="myDirectiveForm">
<nb-card-back>
<input type="text" name="username" ng-model="vm.username" required>
<div ng-messages="myDirectiveForm.username.$error" role="alert">
<div ng-message="required">Required field</div>
</div>
</nb-card-back>
<nb-card>
This will still wire in nicely and in the parent directive you could use something like this:
<ng-form name="nbcardform" ng-submit="submit()" novalidate>
<ng-transclude ng-transclude-slot="back"></ng-transclude>
<div class="row">
<div class="col-xs-12">
<button type="submit">Save</button>
</div>
</div>
{{ nbcardform.$valid }}
{{ nbcardform.myDirectiveForm.$valid }}
{{ nbcardform.myDirectiveForm.username.$valid }}
</ng-form>
Have you tried:
<div ng-messages="vm.username.$error" role="alert">
The transcluded content uses the outer scope unless you specify a different scope to the transclude function in your linking function. See "Providing your own Transclusion Scope" here. Note that once you do that, you may no longer be able to reference vm.
my setValidity not working, the message ngshow not working well.
html:
<span ng-show="form.year_of_birth.$error.notAge &&
form.year_of_birth.$touched">Your to Young</span>
js:
$scope.form.year_of_birth.$setValidity('notAge',false);
To create the various checks and to change the validity of the input form, you can use the use-form-error directive.
In your case do this (jsfiddle):
<form name="ExampleForm">
<label>Enter number more then 7:</label>
<input ng-model="dateBirth" name="dateBirth" use-form-error="notAge" use-error-expression="dateBirth&&dateBirth<7" />
<div ng-show="ExampleForm.dateBirth.$error.notAge">Your to young</div>
</form>
Or you can use ngMessages:
<form name="ExampleForm">
<label>Enter number more then 7 and less then 70:</label>
<input ng-model="dateBirth" name="dateBirth" use-form-error="notAge" use-error-expression="dateBirth&&dateBirth<7" />
<span use-form-error="isOld" use-error-expression="dateBirth&&dateBirth>70" use-error-input="ExampleForm.dateBirth"></span>
<div ng-messages="ExampleForm.dateBirth.$error" class="errors">
<div ng-message="notAge">Your a young</div>
<div ng-message="isOld">Your a old</div>
</div>
</form>
All,
I am working on an AngularJS form and am trying to see how the ng-messages directive works with ng-messages-multiple. I can't seem to get it to pick up multiple errors. I expect to see both the required and minimum errors at the same time but for some reason I only see required, then minimum. I posted the HTML below. I have the ng-messages included using bower, the script call in my index.html page, and I am injecting into my app.js module as required.
I am using AngularJS v1.3.2 in this project.
<div class="panel panel-default">
<div class="panel-heading">
<h1>Validation Test Form</h1>
</div>
<div class="panel-body">
<form class="form" name="form" role="form" ng-submit="submit(form)">
<div class="row">
<div class="form-group" show-errors>
<label for="name">Name:</label>
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
<div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
<div ng-message="required">Required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
{{formError}}
</div>
</div>
Try to use ng-minlength instead minlength
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
ng-minlength="5"
required/>
instead
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
EDIT
It is normal behaviour for ng-minlength directive, this directive validate only when we have not 0 size of input, entered a value it must be at least 5 characters long, but it's ok to leave the field empty, and, unfortunately, in anyway you don't achieve, that you want. I offer you to create your custom directive or see in direction ng-pattern directive with need behaviour, if you very want that showing two message.