I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Related
This is my page when I click on Edit the dropdown is not selected with value in the dropdown list ... Image
In edit mode i got like this ... Image
Dropdown shown with values... Image
I need like this ... Image
Here is my angular code:
<select class="form-control form-control-sm form-control-Cutom-height" id="dropdown" style="height: 38px;" ng-model="suppliment.PurchaseTypeId">
<option ng-repeat="Supple in PTSupplement" ng-selected="{{ Supple.PurchaseTypeId == suppliment.PurchaseTypeId }}" value="{{Supple.PurchaseTypeId}}" >
{{Supple.PurchaseType}}
</option>
</select>
Please help me :)
It appears as if when you display the dropdown, the your value is not be populated as the selected value properly. When using <select> in AngularJS, you can specify the ng-options attribute and use that to generate all of the <option> fields for you without doing the ng-repeat that you're doing.
From the AngularJS docs regarding the use of ngSelected:
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
Instead use the following:
<select
class="form-control form-control-sm form-control-Cutom-height"
id="dropdown"
style="height: 38px;"
ng-model="suppliment.PurchaseTypeId"
ng-options="Supple.PurchaseTypeId as Supple.PurchaseType for Supple in PTSupplement">
</select>
I have a filter list using a select tag. I want to be able to filter the array based on the option selected. I have tried using v-model as this works with checkboxes but unfortunately doesn't work with select fields.
Any help would be amazing.
Please find my fiddle attached
<div id="app">
Selected: {{concatenated}}
<select>
<option v-for="item in vals" :select="item.selected">{{item.value}}</option>
</select>
<!--
<div v-for="item in vals">
<p>
<input type="checkbox" v-model="item.selected">{{item.value}}
</p>
</div>
-->
</div>
https://jsfiddle.net/39jb3fzw/2/
You should take a look at the docs and how they do databinding with select.
https://jsfiddle.net/s3x096u3/1/
<select v-model="selected">
<option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
</select>
With regards to your code, a select attribute on an option element doesn't do anything.
I'm experiencing a problem whereby the validation messaging doesn't seem to be firing for the below input. The appearance of this input is entirely dependent on another input (i.e. only show if they're still at school). What I've noticed is that, when I remove the ng-if regarding the display of this input, the validation messaging is fine and happens straight away. When ng-if is present however, it only shows the message if the value selected is invalid when ng-if has been satisfied. Any ideas?
HTML
<div ng-if="showSchoolLeavingYear()">
<label for="ddlSchoolLeavingYear">School leaving year:</label>
<select name="schoolLeavingYear" id="ddlSchoolLeavingYear" ng-model="session.form.schoolLeavingYear" required>
<option value="">- Please select -</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="ng-hide" validation-message field="schoolLeavingYear">Please select your school leaving year.</div>
</div>
If the ng-if asserts to false it removes the entire <div> from the DOM. Use ng-show so that the validation on those input fields still happens. Furthermore you need to close the <div> tag of the ng-if/ng-show so that it does not aply to the nested "error message div" like so:
<div ng-show="showSchoolLeavingYear()">
<label for="ddlSchoolLeavingYear">School leaving year:</label>
<select name="schoolLeavingYear" id="ddlSchoolLeavingYear" ng-model="session.form.schoolLeavingYear" required>
<option value="">- Please select -</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="ng-hide" validation-message field="schoolLeavingYear">Please select your school leaving year.</div>
Following is my code snippet. I want to validate my select box using angular.
<form name="myForm">
<select name="category_1" ng-model="catid" id="category_1" ng-options="category.catid for catid in categories" required>
<option value="" selected=""></option>
<option value="1">music</option>
<option value="2">internet</option>
</select>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
</form>
but can not submit the form I got this error in chrome,,and submit button is not working
An invalid form control with name='category_0' is not focusable.
here is the plunker
The problem is not the select box, maybe the problem is that you have another select box (with name category_0) or other input field (with name category_0), which has the required attribute and it is hidden or is not visible.
So when you try to submit your form, it tries to focus it, but is not possible. Make sure that the element with name category_0 is not inside an ng-hide block, or inside an ng-show with a false condition.
I have an issue in dynamically creating select dropdown in angular js, changing one dropdown option make changes on the rest of the dropdowns. My requirement is to use same data option in all dropdown and to get the selected option in each dropdown. How do I over come this problem?
example:
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option'
ng- change="optsChanged()"required ng-options='option.value as option.name for option
in useroptions'>
</select>
<div>
I need to create a dropdown for each row of a table that has the same options, but it should be a different instance or different model to be assigned dynamically.
use the index as the subscript for the ng-model ng-model='newcategory.option[$index]'.. currently you are using the same ng-model for all the select boxes which is causing the issue
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option[$index]'
ng-change="optsChanged()"required ng-options='option.value as option.name for option in useroptions'>
</select>
<div>