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>
Related
I'm having a hard time to display a message when an input is valid. To display error messages, it is working alright. This is what I'm trying:
<form>
...
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<div class="col-xs-10">
<input type="text" id="inputUser" name="usernameInput" class="form-control textbox"
placeholder="Digite seu Username" width="25" ng-model="username.value"
ng-minlength="4" ng-maxlength="10" valid="validateForm.usernameInput.$valid" required>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
<div class="error-message" ng-message="required">*This field is required</div>
<div class="error-message" ng-message="minlength">*Username too short</div>
<div class="error-message" ng-message="maxlength">*Username too long</div>
</div>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$valid">
<div class="valid-message" ng-message="valid">valid!</div>
</div>
</div>
</div>
</form
I also tried to set "ng-message" with the $valid ng-model but to no avail. Any tips?
your form wasn't named
the value of ng-messages should be an object containing a property/properties that you want to validate against. eg input.$error can have in your case required,minlength or maxlength. its different for $valid because that has true/false values, so we check for the property $valid on the object usernameInput for true/false
the value of ng-message should be the name of the property to check on the containing block's ng-messages value object. if the value of the property is truthy you see the content, and you dont if its falsy.
ng-messages/ng-message probably isnt the right solution for your case since you're checking one value and displaying one message.
TLDR
ng-messages : name of object*
ng-message : name of property of object*
if the value of property is truthy, content of ng-message shows... falsy, nothing shows.
angular.module('formDemo', ['ngMessages']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-messages.js"></script>
<body ng-app="formDemo">
<form name="validateForm">
...
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<div class="col-xs-10">
<input
type="text"
id="inputUser"
name="usernameInput"
class="form-control textbox"
placeholder="Digite seu Username"
width="25"
ng-model="username.value"
ng-minlength="4"
ng-maxlength="10"
required>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
<div class="error-message" ng-message="required">*This field is required</div>
<div class="error-message" ng-message="minlength">*Username too short</div>
<div class="error-message" ng-message="maxlength">*Username too long</div>
</div>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput">
<div class="valid-message" ng-message="$valid">valid!</div>
</div>
</div>
</div>
</form>
</body>
add "required" attribute to the input tag
else to avoid manipulation through inspection-tool, PHP works,
if(empty($_POST['usernameInput']))
{
echo "Error!"
}
you can simply use ng-if with validateForm.usernameInput.$valid to control showing valid messages. mention that this block should be put outside ng-message block.
<div ng-if="validateForm.usernameInput.$valid">
valid!
</div>
PLUNKER DEMO
comment: you missed validateForm at your form tag, I think this is typo.
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
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>
I have the following code:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.
Nice solution is use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>
It's show only the first error message with class .view, at the plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
If you wrap the inputs in a form tag with an ID you can use ng-messages on the form to pick up errors from all the inputs. You can see this here: http://jsbin.com/tikufuvawe/2/edit.
<form name="userDetails">
<input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
<textarea name="text" type="text" ng-model="text" required></textarea>
<div ng-messages="userDetails.$error">
<div ng-message="required">This is required</div>
</div>
</form>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit using ng-show to hide other errors such that only one will show at a time. Its not a great solution but works for the situation described.
<div ng-messages="userDetails.number.$error">
<div ng-message="required">number is required</div>
</div>
<div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
<div ng-message="required">text is required</div>
</div>
<div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
<div ng-message="required">other is required</div>
</div>
As you can see the ng-show will get bigger and bigger in size if more validation types are added and if more controls are added that require validation.
Maybe is too late but this is my solution, use ng-messages-multiple to show one or more message, angular respect the order of validation messages:
<form name="loginForm" ng-submit="login()">
<label>Email</label>
<input required name="email" type="email" ng-model="email">
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
<div ng-message="required">El email es requerido!</div>
<div ng-message="email">El email debe cumplir con el formato: email#dominio.com!</div>
</div>
<label>Contraseña</label>
<input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
<div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<div ng-message="required">La contraseña es requerida!</div>
<div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
</div>
<div layout="row" layout-align="center center">
<button ng-disabled="loginForm.$invalid>Login</button>
</div>
</form>
You can do something like this
<div id="messageArea">
<div ng-messages="number.$error">
<div ng-message="required">
Number is required ...
</div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
<div ng-message="required">
Text is required ...
</div>
</div>
In this case you show the second block of messages only if the first one does not exists (and it's hidden if number.$errors exists)
This sample (http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html) uses a follow solution:
<div ng-messages="my_form.first_name.$error"
ng-if="interacted(my_form.first_name)">
$scope.submitted = false;
$scope.submit = function() {
$scope.submitted = true;
};
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
If you don't want to show on page load but either on page submit or on change of value then use
<form name="frmSome">
<div ng-messages="userDetails.$error"
ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
<span ng-message="required">Name is Required</span>
<span ng-message="maxlength">Max. 100</span>
</div>
<input name="userName" type="text"
ng-model="model.name"
ng-required='true'
ng-maxlength="30" />
..............................
..............................
<input type='submit' value='Submit' />
</form>
If you touch the text box it will be "dirty"
if try to submit the page "Submitted"
It works on the name not the model
I've created a basic angular form and can't determine why it's not submitting.
http://contact-info.checkoutbiblebowl.com/
The form validation is valid and it still won't submit. I feel like I've overlooked something silly, but have looked at this over the last few days and can't figure out what it is. Any suggestions?
<form method='post' action='' name='form' novalidate ng-controller="myController">
<div class="row form">
<div class="form-inline">
<div class="form-row">
<label class="form-label" style='margin-top: 20px'>Name</label>
<div class="form-item">
<div style="float: left">
First<br/>
<input type="text" ng-model="firstName" name="firstName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.firstName.$error.required" class="required">First name is required</div>
</div>
<div style="float: left; margin-left: 1em">
Last<br/>
<input type="text" ng-model="lastName" name="lastName" class="small" style="width: 200px" maxlength="32" required>
<div ng-cloak ng-show="form.lastName.$error.required" class="required">Last name is required</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="button-row">
<button ng-disabled="!form.$valid" type="submit" class="btn" ng-click="debug()">Submit</button>
</div>
</div>
</div>
</form>
My Controller:
<script type="text/javascript">
angular.module('contact', []).
controller('myController', function ($scope) {
$scope.debug = function () {
console.log($scope.form);
}
});
</script>
I think you just need to specify the action explicitly, not with an empty string otherwise angular will prevent the submission.
http://docs.angularjs.org/api/ng.directive:form
like so:
http://plnkr.co/edit/WtP03BFVyEsnOqf3n8a4?p=preview