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>
Related
In my project I am facing an issue that ng-if is not working. I want to remove/add text field when value of $scope.edit changes.
I have created a simplest of example in the jsfiddle below.
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.name = "Johny";
}
http://jsfiddle.net/U3pVM/32009/
Your Fiddle may not work because you are using Angular 1.0.1 which has some issue in ng-if.
Solution 1
If you are really using this version, you can replace ng-if by ng-show (which will create hidden elements in the DOM).
<div ng-show="edit">
Demo on JSFiddle using ng-show
Solution 2
Anyway, the best solution would be to use Angular 1.2+ which fixes ng-if bugs in ng-repeat. As you can see in the following snippet, I didn't change your code, and it works.
Demo on JSFiddle using ng-if
Some observations :
Seems that your angular version is old. hence, ng-if is not working.
If you want to use only existing angular version then you can use ng-show instead of ng-if.
Demo with ng-if :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Demo with ng-show :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Use ng-show instead
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
DEMO
Update the angular version with 1.2 or above with ng-if
angular.module('myApp', [])
.controller('TestCtrl', function($scope) {
$scope.name = "Johny";
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS </title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</body>
</html>
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 the following AngularJS code and I want to be able to total the calculated fields that appear in the results1 and results2 disabled inputs. Can someone advise how this is done?
Thanks,
John
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<form name="form" action="index.php" method="post" autocomplete="off">
<input type="text" name="field1" ng-model="field1" ng-init="field1='10'">
<input type="text" name="field2" ng-model="field2" ng-init="field2='10'">
<br>
<input type="text" name="results1" value="{{(+field1*100|currency)}}" disabled>
<input type="text" name="results2" value="{{(+field2*100|currency)}}" disabled>
</form>
<h1>{{(+results1--results2|currency:"")}}</h1>
</body>
</html>
Use ng-value instead of value to get that expression evaluated properly
<h1>{{(+field1--field2|currency:"")}}</h1>
<h1>{{(+field1*100--field2*100|currency:"")}}</h1>
Can you try like this ?
For some reason Angular validation is not showing Html5 baloon/popups if we add two or more fields.
Please check these two examples:
Example with just one field. Press enter key to validate field and Html5 baloon/popup will show:
https://plnkr.co/edit/oKePef7p4O4AD59eWXe8?p=preview
Example with two fields. It doesn't show Html5 baloon/popup on field validation.
https://plnkr.co/edit/ZkDwB40Zhas3yjkT6AdM?p=preview
What is happening here!?
Thanks in advance.
In fact, none of your plnkrs are doing nothing, you're trying to use ngMessages module but you didn't put any kind of message error or anything.
Take a look on this simple demo:
(function(angular) {
'use strict';
angular.module('ngMessagesExample', ['ngMessages']);
})(window.angular);
<!DOCTYPE html>
<html ng-app="ngMessagesExample">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>
</head>
<body>
<form name="form">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : form.myName.$touched && form.myName.$invalid }">
<label for="name">Enter your name:</label>
<input type="text" class="form-control" name="myName" id="name" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
<div class="help-block" ng-messages="form.myName.$error" ng-if="form.myName.$touched">
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : form.myEmail.$touched && form.myEmail.$invalid }">
<label for="email">Enter your email:</label>
<input type="email" class="form-control" id="email" name="myEmail" ng-model="email" required />
<div class="help-block" ng-messages="form.myEmail.$error" ng-if="form.myEmail.$touched">
<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>
</div>
</div>
</div>
</form>
</body>
</html>
I'd recommend you to check this tutorial to learn more about ngMessages.
I hope it helps!
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