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.
Related
If zipcode is empty then form is invalid so button is disabled but if zipcode is 2 digits error message is showing but form is showing as valid in controller. If zipcode is empty then I need to disable button but I'm checking form valid or not but dont worry about ng-disabled. I just need solution for showing the "div" if and only if form is valid.
function submitUserDetail (formValid) {
if(formValid) {
$scope.showDiv = true;
}
}
<div class="">
<div class="">
<label required>
Zip code required
</label>
<label pattern>
Invalid Zip code
</label>
</div>
<div class="">
<input type="tel" maxlength="5" class="" name="zip5"
ng-model="userDetail.zipCode" required=""
pattern="^\d{5}$"
data-validate-on-blur="true" value=""
size="5">
<span class="" title="Reset" onclick="jQuery(this).prev('input').val('').trigger('change');"></span>
</div>
</div>
<div class="">
<div class="">
<div class="">
<span class=""></span>
<button class="" href="#" id="button" ng-click="submitUserDetail(form.$valid)" ng-disabled="form.$invalid">See section</button>
<span class=""></span>
</div>
</div>
</div>
<div ng-if="showDiv">
.......
</div>
Thanks in advance.
I assume that you have a <form> wrapping the HTML provided.
If so, you should make sure your <form> tag has novalidate applied so you're using AngularJS form validation and not HTML5 form validation:
<form name="form" ng-submit="submitUserDetail(form.$valid)" novalidate>
Also, it looks like you're mixing HTML5 validation attributes with AngularJS validation attributes. You should be using ng-required and ng-pattern instead of required and pattern.
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 angularJS validation issue with below field , if i use ng-model its not making form $valid even the value is selected, So i used k-ng-model now this field is out of the validation scope, Any suggetion will be appreciated.
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
ng-model-options="{updateOn: 'blur'}"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div
I have a simple code :
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form.aDiagnosisResult.$error.maxlength">Too Large</p>
</div>
</div>
and use $scope.form.$valid to generate the error message.
But problem is since use ng-repeat every time it finds the same name and when i want to generate second list by clicking a button ,,first error message is gone and error-message now works on the second text (obviously).
So How can i generate error-message each and every time dynamically ,,so every text form in ng-repeat,it has it's own error-message.
You can generate dynamically name attribute of your inputs in ng-repeat. For example, you can put $index (or id of your objects or whatever you want) to generate unique name for your inputs.
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName-{{$index}}" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult-{{$index}}" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form['aDiagnosisResult-' + $index].$error.maxlength">Too Large</p>
</div>
</div>
Example on plunker.
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.