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.
Related
I am using parsley.js, I have native dropdown I have a certain list with a specific value to it, I want to trigger parsley error when value="noValue" (select) is selected.
<select required="true">
<option value="NoValue">Select</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
so when the user selects "select(value="novalue")" parsley should trigger an error if required="true" and show an error message and append parsley-error class on the select/parsley-success if any other value is selected.
Thanks in advance
Have a look at custom validators - they'll help to achieve that behaviour.
Or...if your option values are really single letters, you can use a regex-pattern such as \w for any single word-character. It will fail for "NoValue".
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 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 have a drop down which is populated using ng-repeat as below(with dummy values) :
<select ng-model="methodId" name="methodName" id="method" >
<option ng-repeat="detail in details" value="{{detail.modeId}}" ng- selected="detail.modeId == a.modeId"> {{detail.description}} </option>
</select>
On clicking the drop down, an empty row is also populated along with other values
Solutions tried :
1)To add an extra option.
<option value="" ng-hide="true"></option>
This works in chrome, but not in IE
2)To initialize the ng-model.
This works in most of the cases. But there is a scenario in our project where we cant initialize the ng-model value all the time(as it is dependent on few other factors)
Is there any other solution for this problem. Kindly provide your suggestions. Thanks for your time in advance!
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.