I have two ng-messages associated with one Text field but I want one Message as a default -
This field is Mandatory!
which loads with the page get refreshed/opened
but the second one i.e Username contains atleast 3 characters should only shown when atleast one text entered into the textbox.
Whenever the page is loaded the second message which didnt required is shown and then vanishes when the page is loaded completely,How can I remove this and make the page more prominent.
Here's my code what I am trying is
<div class="errormsg" ng-messages="loginForm.username.$error">
<div ng-message="required">This field is Mandatory!</div>
<div ng-message="minlength">Username contains atleast 3 characters</div>
</div>
Suggest me a way to achieve this in angular.
Thanks in advance.
You need to use $pristine alongwith $invalid. See below example. I am using help-block instead of ng-message. You can add additional validations like min length, max length etc as desired.
<form name="contactUsForm" ng-submit="sendContactUsMessage();" novalidate>
<div class="form-group" ng-class="{ 'has-error' : contactUsForm.name.$invalid && !contactUsForm.name.$pristine }">
<label for="name">Name<span class="glyphicon glyphicon-asterisk mandatory" aria-hidden="true" /></label>
<input type="text" name="name" class="form-control" placeholder="When were you born?" ng-model="message.name" ng-required="true">
<p ng-show="contactUsForm.name.$invalid && !contactUsForm.name.$pristine" class="help-block">Name is required.</p>
</div>
</form>
Related
I am trying to set the select field in the view to be required. So I'm having the below tags in my view.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">Laboratory Name</label>
<select name="labName" class="form-control" ng-model="request.labName" required>
<option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
</select>
<div style="color:maroon" ng-messages="homeForm.labName.$error"
ng-if="homeForm.requestTypeName.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
I was hoping the This field is required will show up only when there is no data selected. But irrespective of the field has data or not This field is required shows up like below
Is there something I am missing here
You need to set the same input name in your input and in your ng-message. Doing this, you don't even need to have ng-if. For example:
<form name="form">
<input name="fullname" type="text" ng-model="fullname" required/>
<div ng-messages="form.$submitted && form.fullname.$error">
<p ng-message="required" class="help-block">This field is required</p>
</div>
</form>
In this case I am using form.$submitted. You can remove that, replace it with touched/dirty or whatever. The principle is the same.
The ng-messages directive is in a separate library module and must be included as a dependency.
Example
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
JS
angular.module("app",["ngMessages"])
For more information, see AngularJS ngMessages Module API Reference.
You are using homeForm.requestTypeName in the ng-if, and there is no input control named requestTypeName, i guess you must use homeForm.labName as you use in the ng-message attribute.
Basically, change the ng-if to ng-if="homeForm.labName.$touched"
TL;DR;
You could use as well the homeForm.labName.$error.required for checking if actually the end user has passed away that field without entering some input.
Source: https://docs.angularjs.org/api/ng/directive/ngRequired
I want to add a message, whenever the user does not select any value in the select tag.
Until now I have approached as below:
<form name="jdForm">
<div class="form-group col-sm-6 require">
<label class="form-control-label">Jd Name</label>
<select class="form-control" name="jdname" ng-model="oData.jdDetails.jdName" required>
<option>select</option>
<option ng-repeat="jd in jdNames">{{jd}}</option>
</select>
<span ng-show="jdForm.jdname.$untouched ">Please select jd name</span>
</div>
<button ng-click="fnSave()">Publish</button>
</form>
Here the message is shown what I have given in span but the thing is onload event. It is showing but I need to show it after clicking on publish button. The ng-click function call should not happen until the form is validated.
you need to kept submit button instead simple ng-click and on every error message tag apply condition of is form submitted or if you want to show error even on focus out add one more condition of is touched.
bellow is example i prefer for validating form
<span ng-messages="signupForm.password.$error" ng-if='signupForm.$submitted || signupForm.password.$touched'>
<span ng-message="required" class="help-block">Please Enter password</span>
</span>
I would use something like:
savePressed && (jdForm.jdname.$untouched ||jdForm.jdname.$invalid)
Where savePressed is just a variable which turns to true after pressing the publish button.
See the plunker for a working copy
I have included ngMessages into my AngularJS application to do some form validation. It's pretty useful, however I've came across something that I can't really understand.
Let's say I have this code inside my Form that is named: testForm
<input type="text" name="test1" class="form-control" ng-model="test1" required>
<span class="help-block" ng-hide="testForm.test1.$error">Please enter the a test name</span>
<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
<div class="text-danger" ng-message="required">This field is required</div>
</div>
I want to hide the helper message when there is an error in this textbox EXCEPT if the user hasn't started to type anything yet (on $dirty).
How is this possible? With this above code my testForm.test1.$error always gives me true value even if it's empty, therefore always hiding it.
What am I missing here?
EDIT:
I'm clarifying more what I want to achieve:
when typing, the helper message should be visible and the error message should be hidden
when there is an error, the helper message should be hidden and the error message should be visible
when nothing is touched yet, the helper message should be visible and the error message should be hidden
Have you tried ng-hide="testForm.test1.$error && testForm.test1.$dirty"? That way the message always displays when the input field is clean (not dirty).
Edit:
As far as I see it, you want the message to be visible when input field has focus.
In your controller, initialize hasFocus to false:
$scope.hasFocus = false;
In your HTML file:
<input type="text" name="test1" class="form-control" ng-model="test1"
ng-focus="hasFocus=true" ng-blur="hasFocus=false" required>
<span class="help-block" ng-hide="!hasFocus && testForm.test1.$error && testForm.test1.$dirty">Please enter the a test name</span>
<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
<div class="text-danger" ng-message="required">This field is required</div>
</div>
You can replace ng-hide as follows if it suits you. It will hide the message when test1 is not empty and when it has error.
ng-hide="!hasFocus && testForm.test1.$error && test1"
I have an input field which a user must input a value that is within the amount pulled from the database. The input field value entered by the user must satisfy either the minimum, maximum, or default value brought back from the database. So if the minimum value brought back from the database is 4500.25 then the user's input if below that minimum amount should display an error msg (something like ng-messages).
View
HTML
<div class="form-group">
<label>Loan Amount</label>
<div class="input-group">
<input blur-to-currency type="text" class="form-control" name="loan_amount" ng-model="loan.loan_amount" ng-pattern="/(^(1{0,1}|([1-9][0-9]*))(\.[0-9]{1,4})?$)/" min="{{productDetails.minimum_amt}}" required>
<span class="input-group-addon">JMD</span>
</div>
<span class="tiny">Min: {{productDetails.minimum_amt | currency}}</span>
<span class="tiny">Max: {{productDetails.maximum_amt | currency}}</span>
<span class="tiny">Default: {{productDetails.default_amt | currency}}</span>
<div ng-messages="newLoanForm.loan_amount.$error" ng-if="newLoanForm.loan_amount.$dirty">
<div ng-message="required">
<span class="error-msgs">Please enter a loan amount</span>
</div>
<div ng-message="pattern">
<span class="error-msgs">Loan amount must be a numerical value</span>
</div>
</div>
</div>
Object Literal
In the above html I try to use min however that does not work and ng-minlength would not work either. Can someone assist me in maybe creating a directive or something else that will help me achieve my goal. Thanks in advance.
I think min should work but your input type should be number
try below
<input blur-to-currency type="number" class="form-control" name="loan_amount" ng-model="loan.loan_amount" ng-pattern="/(^(1{0,1}|([1-9][0-9]*))(\.[0-9]{1,4})?$)/" min="{{productDetails.minimum_amt}}" required>
Checkout the plunker as well http://plnkr.co/edit/HTBFNCLf0a6RXOzaABVU?p=preview
I am doing some validation on text boxes. Once the user enters a valid input, the text box should become green and a tick mark should appear at the rightmost corner. Similarly, if the user has entered an invalid data, text box should become red and a cross should appear instead.
For this, I'm using bootstrap's 'has-error has-feedback' and 'has-success has-feedback' css classes.
My problem is that the textbox is green and has a tick even when the page is loaded for the first time. I need the validation feedback to appear only after the user has entered an input. And the same applies when the form is used to edit the existing records. How can I achieve this ? (I'm not sure if I could use $dirty and '$pristine` to solve this problem)
Below is my Markup.
<div class="form-group" ng-class="(Form.emailAddress.$valid) ? 'has-success has-feedback': 'has-error has-feedback'">
<label for="emailAddress">Email address</label>
<span ng-show="!Form.emailAddress.$valid">Please enter a valid address</span>
<input type="email" class="form-control" id="emailAddress" name="emailAddress" ng-model="Data.emailAddress" ng-pattern="validationPattern" ng-maxlength="20">
<span ng-show="Form.emailAddress.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
<span ng-show="!Form.emailAddress.$valid" class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
A few more questions regarding this topic.
I would like to check the maxlength of the email as well, and if it exceeds 20, I would want to show a different message. I tried Form.emailAddress.$maxlength but couldn't get it working. Does it maxlength work on 'email' types as well ?
How can I show the feedback after the user moves to the next textbox instead of showing it while typing ? May be something similar to jquery's 'focusout()'.
I've used a validation pattern in the controller because email is not a required field, but when entered it has to be valid. Could I please know if there are better ways than doing this ?
Any help would be much appreciated. Thanks
You have to use $valid && $dirty for green and in a separate check, use $invalid and $dirty for red.
Here's an example:
http://plnkr.co/edit/k8X5NSeUrBb2nqA9yD9F
<form name="myform">
Valid: {{myform.myinput.$valid}}<br/>
Dirty: {{myform.myinput.$dirty}}<br/>
<input type="text"
name="myinput"
required
ng-model="myvalue"
ng-class="{'has-success has-feedback': \
myform.myinput.$valid && myform.myinput.$dirty, \
'has-error has-feedback': \
myform.myinput.$invalid && myform.myinput.$dirty}"></input>
</form>