I am using reactstrap with React JS and trying to figure out how to bind the input dropdown list.
When the data is coming in, the optionID can be from any from 1 to 5. I would expect that
when I bring up the UI, the dropdown is always showing Select option and never the other.
I thought if I set the selected={this.state.optionID === Input.value} it would make it work.
Any help is appreciated. Thanks.
<Input type="select" name="select" id="statusDropDown"
value={this.state.optionID} selected={this.state.optionID === Input.value}
onChange={this.handleOptionChange}>
<option value={0}>Select</option>
<option value={1}>Option 1</option>
<option value={2}>Option 2</option>
<option value={3}>Option 3</option>
<option value={4}>Option 4</option>
<option value={5}>Option 5</option>
</Input>
Please find the working sample here. My suggestion is to use a functional component.
Related
I have two dropdown menus in an Angular form. One is country and the other is country dialing code. When the user selects USA on the first dropdown, I want to update the second dropdown to default to +1 for the dialing code. Otherwise, the second dropdown should deafult to the placeholder "Select Country Code". I have successfully done this using javascript, but Angular still considers the form to be invalid when submitted. I've tried forcing the field to become valid in the javascript, but it doesn't seem to work. Is there a way to do this using javascript or an ng command in the HTML? I would like to keep the html formatted as is (i.e. with the select and options tags).
HTML:
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="country" name="country" type="text"
ng-model="contactSession.country">
<option data-countryCode="UG" value="256">Uganda</option>
<option data-countryCode="UA" value="380">Ukraine</option>
<option data-countryCode="AE" value="971">United Arab Emirates</option>
<option data-countryCode="GB" value="44">United Kingdom</option>
<option data-countryCode="US" value="1">United States</option>
<option data-countryCode="UY" value="598">Uruguay</option>
<option data-countryCode="UZ" value="998">Uzbekistan</option>
</select>
<select required
class="form-control vertical-gap-5--bottom color-gray--warm-8"
id="countryCode" name="countryCode" type="text"
ng-init="contactSession.countryCode = '1'"
ng-model="contactSession.countryCode">
<option value="" selected="selected">Select Country Code</option>
<option data-countryCode="UA" value="380">Ukraine (+380)</option>
<option data-countryCode="AE" value="971">United Arab Emirates(+971)</option>
<option data-countryCode="GB" value="44">United Kingdom (+44)</option>
<option data-countryCode="US" id="usaSelection" value="1">United States (+1)</option>
<option data-countryCode="UY" value="598">Uruguay (+598)</option>
</select>
JS:
$('select[name=country]').change(function () {
if ($(this).val() == '1') {
document.getElementById("countryCode").value = document.getElementById("usaSelection").value;
} else {
document.getElementById("countryCode").value = "";
}
});
I've made a fiddle, but I am not sure whether this is same as your intent or not.
Change select box
<select ng-options="country.code as country.nameAndCode for country in countries"
ng-model="selectedCountryAndCode"
ng-change="changeCountryAndCode();"
required>
<option value="">Select Country Code</option>
</select>
If you use 'ng-options', it'll make code more simple.
.
.
UPDATE
Here's updated fiddle.
A little modified following as I've understood.
.
.
.
Latest UPDATE
Here's another updated fiddle
I have got simple select box which should be set as default to state Active(true) or Blocked (false).
Any ideas how to do it as simple as it is possible ?
<select class="form-control" ng-model="selectedUser.active" >
<option value="true">Active</option>
<option value="false">Blocked</option>
</select>
Solved by adding
<option ng-selected="selectedUser.active" value="true">Active</option>
<option ng-selected="!selectedUser.active" value="false">Blocked</option>
This one issue is bugging me since it seems so easy to fix.
I am using plain HTML, but the data is being passed to the next view via angular.
The snippet of code looks like this:
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
What I am trying to achieve:
Having <option value="25">25-30</option> as the default selected option when angular loads
What I've tried:
Having <option value="25">25-30</option> with a ng-selected="age" attribute
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option ng-selected="age" value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
Having <option value="25">25-30</option> with a selected="selected" attribute
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="21">21-24</option>
<option selected value="25">25-30</option>
<option value="31">31 and up</option>
</select>
</span>
Even trying <option value="25">25-30</option> displayed first
<span data-ng-show="isCountry()">
<select class="selectpicker" data-ng-model="age">
<option value="25">25-30</option>
<option value="21">21-24</option>
<option value="31">31 and up</option>
</select>
</span>
Option 2 and 3 does display the value I want first, but it is not passed through to the next view
If possible, I prefer not to touch much Angular code, as the main developer is out temporary...
Any help would be appreciated.
Thanks!
Apparently, After much digging into the code the - the age is already being set via a js function
a.defaultAge = {
Country: "25"
}
Thanks for the help David - Your comment is a good to know thing for future reference.
There are a problem here, do not use 'age' as the model but try using something like 'user.age' and assign the value to it like this;
var user = {}; user.age = 25;
<select class="selectpicker" data-ng-model="user.age">
The reason it does not work in the next view is, that the 'age' is totally gone when you reassign a new value to it. Angular monitor change to a variable reference, since the variable 'age' is gone, it does not know when to update the view. Using 'user.age' as the model, angular is watching the 'user' for changes, and if you change the age, Angular will update the view for you.
I would like to have a select with a placeholder in angularjs with bootstrap. The solutions I have found do not work with angular
Here is my angular markup:
<select ng-model="myModel"
ng-options="p.name for p in ..."
class="form-control list-selector required">
<option value='' disabled selected>Please Choose</option>
</select>
If someone has a working solution...
thanks :)
You need to add an empty option to your select:
<option value="">- Please Choose -</option>
Here is a working example: http://jsfiddle.net/DianaNassar/FShdc/
For Angularjs Versions and reactive forms , if you are using ngValue to bind values in options , the following type of solution will work:
<option value='' selected ng-value="null">Please Choose</option>
For Angular 2+ Versions something like this will work-
<select class="form-control"
formControlName="roomType"
(change)="changeRoomType($event)">
<option [ngValue]="null" selected>Room Type</option>
<option *ngFor="let room of roomTypes" [ngValue]="room">{{room}}</option>
</select>
For reference, check this link out-https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98
I've got a very simple form with a select that contains all the states + abbreviations. When using the keyboard to navigate the second keypress doesn't change ng-model value in certain circumstances. For example if you tab to the select element and hit T it will properly select Tennessee and TN will be placed into the ng-model. Hitting down arrow or T a second time updates the displayed value to Texas, but ng-model is still set to TN. Weirdly enough this doesn't occur if its 2 different letters, so T followed by A correctly puts AL into the ng-model.
The HTML looks like this:
<div>
<label for="user_city">City</label>
<input type="text" name="user_city" id="user_city" ng-model="user.city" />
<label for="user_state">State*</label>
<select name="user_state" id="user_state" ng-model="user.state" style="width: 228px" required>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
Here is a jsfiddle demonstrating the issue: http://jsfiddle.net/cKF6Q/2/
To duplicate, click the city box and then press TAB to focus the select box and type T T. You'll see user.state go to TN on the first press of T, but the second one is ignored.
NOTE: This is only the SECOND keypress so you have to reload the page between tests.
I had the exact same problem. Here's a jsFiddle - the first dropdown has been "fixed", the second one has not (just for demonstration).
<div ng-app>
<input type="text" name="name" ng-model="form.name" />
<select name="expirationMonth" ng-model="form.expirationMonth">
<option value="">--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
</select>
<select name="expirationYear" ng-model="form.expirationYear">
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select>
<pre>{{ form | json }}</pre>
</div>
I noticed it with the down arrow key. I tab onto the field and press the down arrow. The first key press updates the model. The second key press updates the form element but not the model. The third key press and every key press after that updates the model as you would expect.
The Fix
Add an extra option with a blank value to the top of the list. By making the value blank, it will not interfere with form validation (marking the field as required, for instance). Also, AngularJS does allow you to include one static option when you bind to an array. From the AngularJS docs:
Optionally, a single hard-coded <option> element, with the value set
to an empty string, can be nested into the <select> element. This
element will then represent the null or "not selected" option.
UPDATE: Browser Diff
I've noticed that Chrome will update the display of the model with each keypress of the down arrow (except the second keypress when the static default option is not present, obviously). Chrome was the browser I used when writing the fiddle. Firefox, on the other hand, does not update the display of the model until i tab or click out of the field. Internet Explorer 11 updates the model "on the fly" similar to Chrome, but I wasn't able to reproduce this "2nd keypress issue" on IE 11. I don't have any other browsers to test on.