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
Related
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>
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
How can my ngMessages access information about the form error? Such as field name and other properties?
Example:
I've seen many examples that look like this:
<input type="text" ng-model="field" name="myField" minlength="5">
<div ng-messages="myForm.myField.$error">
<div ng-message="minlength">The value entered is too short</div>
</div>
This is not a good error message because it doesn't tell the user how long the input should be. It just tells them it's too short.
It should render something like: "This field must be at least {{ minlength }} characters."
Even better: "{{ field }} must be at least {{ minlength }} characters."
Having to define a different message for inputs of different minlengths is extremely not-DRY.
How can this be done with ngMessages?
You could keep the minlength value on the scope and then bind to it in the validation message.
<input type="text" ng-model="field" name="myField" minlength="::myFieldMinlength">
<div ng-messages="myForm.myField.$error">
<div ng-message="minlength">This field must be at least {{::myFieldMinlength}} characters.</div>
</div>
I would do it the same as jayChase suggested. It's definitely easiest way and as he has suggested using single binding won't be bad performance wise
How can I mimic the tags box behaviour from SO in AngularJS? I'm trying to do something kind of similar where the user enters a set of space/comma-delimited words and as each one is typed I want to parse it out and put it into an array. I know there are probably 30 different ways to do this with bespoke javascript but I'm looking to leverage AngularJS in the most efficient way possible here.
At the moment I have an ng-model based on the input field and I'm doing an ng-repeat to create spans containing each tag, but angular uses commas as the delimiter and it also includes partially-formed words. So I only want to include words that have been delimited by the space/comma and I want to put them into an array so I can perform some validation on each one as it's entered, see below.
<form role="form" class="form-inline" data-ng-submit="updateScore()">
<input data-ng-list data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >
</form>
<span data-ng-repeat="label in labels track by $index">
<span class="badge">
{{ label }} 5 <span class="glyphicon glyphicon-remove-sign"></span>
</span>
</span>
Any ideas?
Figured it out actually...
<input data-ng-list="/[,\s]/" data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >
I am trying to get number of rows from the text that gets inject into text area, for some reason I can't get textarea to initalize number of row, here's my code. What am I doing wrong?
<div class="form-group col-sm-12">
<textarea contenteditable="true"
rows="'iwofRecord.WhatHasBeenDone.split('\n').lenght'"
class="form-control form-control-plain"
ng-model="iwofRecord.WhatHasBeenDone"
placeholder="What Has Been Done">
</textarea>
</div>
rows is not an Angular attribute, wrap that in {{}} - you're also double quoting that attribute (and have length spelled wrong)
rows="{{iwofRecord.WhatHasBeenDone.split('\n').length}}"
.lengHT - there is a typo, it has to be .length