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?
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 form and i am showing the input field depending on the select list (if they select tow the input field tow will be showing ) and its work fine
my problem is the text fields are rquired , so if they select one option then the other field related to other options will be hidden , the form is not submitting to database anymore because that hidden fields are required
what is the solution to solve it?
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<input ng-show="myDropDown=='two'" type="text" required>
thank you
Use ng-if rather than ng-show.
The former removes the field from the DOM, whereas the latter just applies a CSS rule hiding it.
This is code for showing "select a option" in dropdown(select).
<select ng-model="form.type" required="required"
ng-options="option.value as option.name for option in typeOptions" >
<option style="display:none" value="">select a option</option>
</select>
can anybody explain me what is going on behind this code and what is use of display : none in that?
The ng-options directive is like repeater and it will generate options and it will place them after the one with the disply:none which will be selected initially. Check the documentation for more info.
The idea behind the display:none option is to be hidden when the select is expanded so that you end up with valid selection.
With style="display:none" you wont be able to select 'select a option' from the dropdown list. Other than that your selection will be the value of option option.value but the text too choose from will be the name of option as option.name and each option comes from typeOptions.
I found this fiddle, try and remove the style="display:none" and see what happends, also try and remove the whole <option style="display:none" value="">select a option</option> line
The Angular select directive does this because of a wrinkle and how the select control works in the browser. If the select control initially has a value of "X", but there is no option element with value "X", the browser will automatically choose the first option from the list; without the user actually doing so. This is quite unhelpful, as it both generates a spurious change which Angular would then detect, and defeat the likely intention of the "required" setting, which is to require that the human (not the browser, automatically) make a choice.
In your example above, the value is the empty string "", but the same idea applies.
In the "bad old days" of programming the browser DOM by hand, this was also necessary for the same reasons.
I'm trying to get my protractor E2E tests to interact with a drop down menu.
In the page that I'm testing, we have a drop down for countries. The dropdown contains 4 selectable options "?" which is blank, and then US, UK, and Canada.
I'm obviously not calling the element correctly within my PO file, as the parameterization is not working. The tests "pass", however when you watch what is being driven, the country that is selected, is the "?" one(which is default). So the test is navigating to the page, selecting the element and not actually clicking on the option that I'd like.
From what I can tell, I need to somehow get the parameterized option that is inputed from the spec file to the element however i'm not really sure if this is possible.
What am I missing/doing wrong?
Spec file:
campaignPO.clickCountryLocation('US');
PageObject file:
this.countryType = by.css('select[ng-model="country"]');
this.clickCountryLocation = function(button) {
element(this.countryType).click(button);
};
Here is the element were working with:
<select class="form-control input-sm ng-pristine ng-invalid ng-invalid-required"
ng-size="11"
ng-model="country"
name="country"
ng-options="opt.value as opt.label for opt in countries"
ng-change="updateCountry()"
required="">
<option value="?" selected="selected" label=""></option>
<option value="0" label="US">US</option>
<option value="1" label="UK">UK</option>
<option value="2" label="Canada">Canada</option>
</select>
I'd use a select-option abstraction suggested here:
Select -> option abstraction
Example usage:
var SelectWrapper = require('select-wrapper');
var mySelect = new SelectWrapper(by.name('country'));
mySelect.selectByText('US');
First of all, you can simplify your select locator by using
var selectEl = element(by.model('country'));
I am not sure the attribute css works very well. To select options:
var optionEl = selectEl.element(by.cssContainingText('option', 'US'));
optionEl.click();
If you are just trying to open the select without selecting a value, don't. Selects are HTML components and you don't want to test them in this way. Even working with them in javascript is cumbersome. If you want to see what values are in there, list the option elements.
I am new to Angular, I have the following code:
<select id="selectUser" class="form-control" ng-change="selectAction()" ng-model="users"
ng-options="value.SignOnId as value.UserName for value in users">
<option value="">Select a User</option>
</select>
As soon as I select a value from the drop down, it executes the selectAction() method and then all values from the drop down disappear, can anybody tell me what's the reason?
change this: ng-model="users" to ng-model="user"
When you select the user, you are setting the users variable to be the selected user, which means your ng-options no-longer has options in it.