I have the following line's of code. When I use $touched I still don't get the warning when I remove focus from the textarea. Can someone point out what I could be doing wrong here?
I am using angularjs v1.5
<textarea ng-model="ctrl.PendingRequest.BusinessJustification"
name="BusinessJustification"
class="form-control"
placeholder="Minimum of 10 characters"
ng-minLength="10"></textarea>
<div class="warning"
ng-if="!ctrl.check('BusinessJustification') && BusinessJustification.$touched">
Business justification is required
</div>
Related
I'm trying to learn forms in AngularJS 1.x. But I have error messages that are always on when it first loads. How to develop behaviour such that they are blank on load, and only red after a submit if fields were not entered? Seems to be a few states I have to use the built-in directives for.
All the elements are similar so let's just take apart this bit. Also if different for a radio and dropdown list maybe we can discuss that too.
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required">The first name is required.</span>
</p>
Do I chain a few directives with || or && ?
Behaviour I'm aiming for
How to keep the error messages off when it loads?
when I hit submit, and a field is blank, will it then activate the css red error messages?
I'd like the error messages to clear as I fill in the form without reloading.
Yeah, so any tips greatly appreciated. Doesn't have to be particularly pretty
Thanks
UPDATE 1
gist of current code
Well I took a stab at it. Still really a hot mess at this point. Don't know how to use submit to test for each field and then display the error message if blank. Also seems like a lot of duplication on the testing of field states. Is there a better way to break up that logic? Ugggghhhhh
UPDATE 2
This one's weird, the form now has all text boxes not buttons or checkboxes!? But the HTML hasn't changed. Sigh
ng-if="identification.firstName.$error.required && !$pristine"
Go search more on $pristine and $dirty validator
You can add some other property to your ng-if and set its value to true only when form is submitted.
in your html add this new property
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required && running">The first name is required.</span>
</p>
in your controller set this property to true when form is submitted
$scope.submit = function(){
$scope.running = true;
...
}
I would like to use Angular Material library in my project for showing the web page in Material design. I'm having input fields directly in a div, instead of having inside a form . How to properly do error validations now ?
Because the examples given on the documentation uses, form tag, which uses form name for showing ng-messages. How to achieve without form ?
You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>
Example Plunker
Hope it helps
if I provoke 'min-length' error and then try to provoke 'required' error, the latter isn't shown, although the input is underlined in red.
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" maxlength="100" type="password" name="register_password" id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message="maxlength">The password should be shorter</div>
<div ng-message="minlength">The password should be at least 6 characters long</div>
<div ng-message="required">Required</div>
</div>
</md-input-container>
Full working example:
http://codepen.io/AndriusRimkus/pen/mPEjYX
Thanks!
You should use the following code
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" md-maxlength="100"
type="password" name="register_password"
id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message-exp="['required', 'minlength']">
The password shold be at least 6 characters long</div>
<!-- <div ng-message="minlength">The password should be at least 6 characters long</div> -->
<div ng-message="md-maxlength">The password should be shorter</div>
</div>
</md-input-container>
So there are many things you should consider. Since you are using angular material design I think you should use md-maxlength which will show a hint for how many charcters written against maxlength. I am not sure if there is any md-minlength directive is available. Now require and minlength is kind of same thing so I think you should combine those two as a single error message. Now There are some specific things releated to [ngMessages][1] check the documentaion for detail explation. I'll say couple of things about that. By default ngMessges only displays one error message and if there are more than 1 error message are valid then which ever comes first in DOM will be displayed. you can use multiple or ng-messages-multiple to display more than 1 error messages. I suggest you should write you error in incrementing order like required first followed by minlength(If you want to display it seperately) and at the end md-maxlength. You can use ng-message-exp to combine more than 1 error codes.
Your code is correct but there is one point.
You are using an old version of AngularJS Material.
If You change the last script with this lines then your code will be run properly.
<!-- Angular Material Library -->
<!-- Version 1.1.4 -->
<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>
Check online
Good Luck
I have an angularjs view with the following input field that is dependent on what organization the user is from..
<div class="form-group" ng-class="{'has-error': isDirtyAndInvalid(provisionVMForm.vmHostPrefix)}">
<label class="col-sm-2 control-label" for="vmHostPrefix">Host Prefix*</label>
<div class="col-sm-8">
<div ng-show="$root.sessionObj.org.name=='orgName1'>
<input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text"
required="true"
ng-maxlength="12"
ng-minlength="12"
placeholder="Host Prefix"
ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
ng-model="vmHostnamePrefix"/>
<div class="pull-left alert alert-danger form-validation-alert" role="alert"
ng-show="provisionVMForm.vmHostPrefix.$error.minlength ||
provisionVMForm.vmHostPrefix.$error.maxlength>
Host Prefix must be 12 characters long.
</div>
</div>
<div ng-show="$root.sessionObj.org.name=='orgName2'>
<input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text"
required="true"
ng-maxlength="4"
ng-minlength="4"
placeholder="Host Prefix"
ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
ng-model="vmHostnamePrefix"/>
<div class="pull-left alert alert-danger form-validation-alert" role="alert"
ng-show="provisionVMForm.vmHostPrefix.$error.minlength ||
provisionVMForm.vmHostPrefix.$error.maxlength>
Host Prefix must be 4 characters long.
</div>
</div>
</div>
</div>
What I need to do is identify what organization the user is currently in, and dependent the org, the hostname prefix input field can only be a certain length. Now, this works perfectly fine when I have just the first ng-show in my code. It correctly identifies the org name and the form complains if the input is less than or more than 12 characters. Whenever I add my second ng-show to identify my second organization.. my first organization form validation for org # 1 is not correct. The form only complains if the input IS 12 characters. I need it to be the opposite. Any ideas what I'm doing wrong by adding this second ng-show? I tried using ng-if when trying to identifiy the organization and that worked fine with the form validation.. but that resolves my vmHostPrefix variable to undefined in my controller. Any help is appreciated!
ng-show hides the element with display: none, while ng-if will remove the element from the DOM. I think what you have here is a bug caused by having 2 elements with ng-model pointing to the same variable.
Why not do this without repeating so much code and instead try using an expression in ng-minlength.
ng-minlength="$root.sessionObj.org.name==='orgName1' ? 12 : 4"
Or even better have ui state rules for the org
ng-minlength="$root.sessionObj.org.minlength"
ng-maxlength="$root.sessionObj.org.maxlength"
I believed they fixed expression evaluations for ng-min max in 1.3
I have a few requirements for validating a form, and my attempts have been unsuccessful.
The form should validate as you fill it out. The md-input-container should be invalid if the validation requirements fail and the associated ngMessage should show. For example, if an input is marked as required it should turn red and show the message if you click into it and then move focus without typing anything.
The inputs should also be invalid if the form is submitted and they fail validation.
Here is what I've tried:
<md-input-container md-is-error="jac.application.$invalid && (jac.application.$submitted || jac.application.$dirty)" flex="20">
<label>Last Name</label>
<input type="text" name="last_name" ng-model="jac.application_object.last_name" required />
<div ng-messages="jac.application.last_name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
Using the above, submitting the form without entering anything has the desired effect; however, entering something valid into the input afterwards ONLY clears the ngMessage (the container is still red).
Also, the form doesn't validate as you fill it out.
Any suggestions on how I can achieve this?