So I have a select box which populates some values into the dropdown using ng-options So I want to show the error messages as soon as the user click on the dropdown and focus out without making a selection.
JS Code
$scope.someMap = [{ 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 someMap 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>
So it is working in a case where I add a blank option like option value="" selected hidden/> </select> and select some valid value and then select the blank option again, it gives error message as Required field.
But as you can see, the above selectbox will be blank once the page loads, so if use click on the dropdown and focus out without selecting or move to other field without selecting any value it should give error as Required field.
now if I try to iterate through the value of form.inpName.$error is never having any value and i cannot validate it using the above technique.
I have tried ng-show , ng-if , message expression may be am lacking some expertise.All of them works after selecting valid entry from dropdown and then moving back to blank option.
Solutions which would not work for me
Check model value:I do not want to go to model for these types of field and check if they are blank then show some error message, rather I want to iterate through the $error array and find the issue with the field
Make the default option selected when page loads- Cannot do it.
Add a field as selected one options : This will also not work because if the user did not touch the selection at all and filled all other fields the $error will not be populated for this select dropdown.
Any help would be much appreciated, really struck on this one.
As helped by #Ininiv in above post the code i posted works fine in plunker but not in my dev environment.
So based on some POJO/Entity out objects gets formatted with properties as null.So when i select and the option populates angular does not see as a change in the model, unless i select a value from dropdown and select a blank option from dropdown again. It gets activated.
But I wanted it to start working from the first touch itself, if left blank the error message should pop up.
To tackle this the ngModel needed to be set to null, when the dropdown the $error thing is activated and If i leave it blank and move to other field the error shows up.
So basically on the change of model only the ngMessages directive get activated which was not happening for dropdowns which were populating based on some object properties.
Related
I have a required <select> field:
<select name="service_id" class="Sitedropdown" style="width: 220px;"
ng-model="ServiceID"
ng-options="service.ServiceID as service.ServiceName for service in services"
required>
<option value="">Select Service</option>
</select>
When it is empty, the form should display a "Select service" error message. Here's a working plunker.
It works fine when you intentionally selects the empty option. But when you reload the page, the service_id is empty by default and there is no validation. How to make AngularJS validate the default value?
Your code:
ng-show="myForm.service_id.$dirty && myForm.service_id.$invalid"
This means - if value is dirty (was changed) and is invalid. Remove first and you'll get what you want.
Validation checks are only run after the value bound to ng-model is changed at least once, or when the user attempts to submit the form. If that was not the case, all the required fields of a form would be shown with error right after page loading, which would be a pretty undesirable behavior.
That's why you only see the error when selecting something else and then changing it back to the empty value.
I have searched a lot for the issue which i am facing. I have just started learning Angular and stuck in this problem since 3 days and wasting my time to solve this.
i have roles listing array. i have added selected = true key value pair if that element is selected in the form.
[{"role_id":1,"name":"MANAGER","selected":true},"role_id":2,"name":"USER","selected":true},{"role_id":3,"name":"Developer"}]
i have added selected roles in $scope.selectedRoles variable from controller and used in ng-model this way i can get selected role in edit form
<select ng-model="selectedRoles" multiple ng-options="item.name for item in roles track by item.role_id" class="form-control" > </select>
but when i save edit or add then i dont get any value in controller nor ng-model bind the input which i give in select
if i change ng-model to selectedRoles to permission.roles then i could save or edit.
i want to do both task which is not happening.
i appreciate in advance if any help.
<select ng-model="vm.pageNumber" ng-change="someFunction()">
<option ng-repeat="page in vm.pagesIds" ng-value="page">
Page {{page}}
</option>
</select>
So, pageNumber is a number of current page (1). pagesIds is an array of pages' ([1,2,3])numbers. I cant get it, why on page refresh it doesn't select page? All the functionality is working, pages are being changed, but unfortunately select's selected field is always empty. I've tried using ng-value='page' and value={{page}} but still doesn't work.
Even initial vm.pageNumber = 1 is not showing, select has empty field, though dropdown contains all the options.
Any tips, please?
UPDATE:
When I try to ng-selected='vm.pageNumber == page' it works only for last option 3.
Well, somehow same stuff works for Angular Material's md-select. Not the proper solution, but it works. https://material.angularjs.org/latest/api/directive/mdSelect
<select ng-model="vm.pageNumber" ng-options="page as page for page in vm.pageIds" ng-change="someFunction()"></select>
Setting your vm.pageNumber will set the drop down value.
I have a select list which is rendered via an ng-repeater and on change it fires the value of the selected option into a function this works as expected.
The issue I am now stuck on is if the page is loaded with a specific option requested how I ensure that select option is highlighted.
I have it so the GUID which is the value of the select is automatically fired to the function to get the page data for the selected item so that's working the issue is highlighting the selected item in the select list to show the user its related to that selection.
My code is below but you will see that I am binding it to ng-model="asCtrl.accSelected" which passed the GUID value. My assumption was that when a predefined GUID is requested I can set vm.accSelected to be equal to the GUID value and that should due to the 2 way binding show the selection on the select list but this doesn't seem to be the case.
<div data-ng-controller="tpAccStatusCtrl as asCtrl">
<select class="form-control" ng-model="asCtrl.accSelected" ng-change="asCtrl.retrieveAccount(asCtrl.accSelected)">
<option value="select" selected="selected">Select an Account</option>
<option ng-repeat="acc in asCtrl.accounts" value="{{acc.UniqueIdentifier}}">{{acc.AccountName}}</option>
</select>
</div>
I hope the above makes sense and someone can show me how to ensure the select list reflects the value set for vm.accSelected
Call the asCtrl.retrieveAccount(asCtrl.accSelected) function manually on page load. Ng-change will only trigger if the value is changed by the input, if I'm not mistaken.
I've got an ng-grid that I want to be able to search on particular columns. The user enters some text and chooses a column from a dropdown. My UX guy doesn't much fancy the search-field-in-every-column-header that ng-grid supports.
Here is my Plunker:
http://plnkr.co/edit/WofBDA6QQkCDcwDMznzf?p=preview
(I haven't bothered with the text field yet, just worried about the field picker so far)
I've got a method that grabs the field and displayName for each field and populates my select with options, but for some reason, it gives me an empty first option. I don't want an empty one - and certainly not if it's going to look like this:
<option value="? undefined:undefined ?"></option>
I want it to default to a field of my choice (in the plunker example, I want it to default to 'age')
I can't figure out why I'm getting an undefined option - unless it's because the control is being rendered by my getFilterFields() function BEFORE the colDefs are fully defined. I've tried various ways of delaying the getFilterFields()function - I played with init: gridInit parameter, but so far, no joy.
How can I assure that
1] my dropdown contains ONLY valid columns, and
2] one of them is preselected?
It's better to use ng-options and set the model to the option that you want to be selected.
<select ng-model="selectedItem"
ng-options="item.value as item.name for item in filterOptions.filterFields">
</select>
and in the controller, set:
$scope.selectedItem = "age"; // equal to the value of the default option