I am trying to write custom validation on drop down which is mandatory.
I need to impose certain condition based on the values selected by user. If my condition fails I will make field invalid and display error message to user that selected value is invalid.
I have tried to write the following code but not sure where to write method to check condition.
<div class="form-group" data-ng-class="{'has-error' : myForm.duration.$invalid}">
<label for="durationOfclass">Duration</label>
<div class="col-sm-4 col-md-3">
<select name="duration" class="form-control" data-ng-required="true"
data-ng-model="durationOfclass"
data-ng-options="h.name for h in availableDurations()">
<option value="">-- Välj --</option>
</select>
</div>
<label class="text-danger" data-ng-show="myForm.duration.$error.isValid" for="imei">Selected value is invalid</label>
</div>
Can some one help me.
I'd recommend either including, in your controller, $rootScope.$watch('object', validate) (this is slow; the following option is better), or including this on the select:
<select ... ng-change="validate()">
Then, in your controller, $scope.validate would set or unset a flag, which controls whether the form 1. is displayed as valid and 2. is submittable, 3. whether the error message is visible.
Hope that helps!
Related
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
Like others, I have been looking for a good way to validate my forms with Angular without the messages being too aggressive. The closest I have gotten is checking for $dirty and $touched prior to firing the messages. Which works for most situations.
The one situation I can't figure out is when the user edits, for example, a required field. The field has text in it, is valid, dirty, and touched. The user goes back into the field to change it. They backspace what is in the input and immediately the message fires because the input is now dirty, touched, and invalid. I'd rather it "reset" at that point and reevaluate when the user blurs the input again. Give them a chance to fill in the input while it's still focused.
Make sense? Any ideas?
Thanks!
Matt
Perhaps this works:
ng-model-options="{ updateOn: 'blur' }"
Add it to your input element. I believe the validation will occur when the model is updated, this way the model gets updated on blur.
Here you can see more options for this directive: https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions.
Let me know if it works :)
Use function on ng-blur to validate and show messages if invalid.
ng-blur="validate()"
In your controller -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
Take a look at the ngMessages documentation:
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
You have an example there that shows you how to use it:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
I think this is the best way to do it (at least it's how I do it).
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 this code (there is $index because select's are inside ng repeater, I have more than one dynimally generated)
<select name="udaljenosti_{{$index}}" ng-model="attribute.Choices.Id" class="form-control" required>
<option value="" >--Choose--</option>
<option ng-repeat="choice in attribute.Choices" value="{{choice.Id}}" ng-selected="choice.IsSelected==true">
{{choice.Name}} </option>
</select>
There is IsSelected property on choice as you can see. If all choices have IsSelected==false, on submit I get error that some option is required because of required property on select, and when I choose some option on select and hit submit there is no error. Very good, so far. But, when some option is prepopulated from the database there is some strange behaviour. Everything seems good but when I click submit angular says there is error on select field. It says select is required but some option is already selected!!
EDIT: it seems name ang ng-model should much. How to accomplish this because I get error if I put uudaljenosti_{{$index}} inside ng-model?
I've been trying to figure out how to set this particularly select like this:
<select name="ddlStatus" id="ddlStatus" class="form-control" ng-model="status" ng- change="onChangeStatus()">
<option ng-repeat="status in orderStatus" value="{{ status.ID }}">{{ status.Name }} </option>
</select>
How can i set is without ng-repeat and insted using ng-options? Ive tried a lot of solution but nothing solves it like this way i show above..
You can use as in ng-options:
<select ng-model="status" ng-options="status.ID as status.Name for status in orderStatus"></select>
Alternatively, angular seems smart enough to use the whole status object as the value even when you specify some sub-field like name as its label.
<select ng-model="status" ng-options="status.Name for status in orderStatus"></select>
Demo: http://jsfiddle.net/4ApFG/1/
You can use the whole model as the value like:
<select ng-options="status.Name for status in orderStatus" ng-model="status">
</select>
That way you can just get the selected id over status.ID. Angular will handle the value model linking stuff for you.
Or of course the id is also possible. Although at least for me it seems to be a bit confusing because you will have the array index in the generated html and the id as the actual value.
<select ng-options="status.ID as status.Name for status in orderStatus" ng-model="status">
</select>
Additionally asigning the whole model to status makes a lot more sense than just the id.