The selectField in my typescript doesn't shows the default value, when I run the server. I need "select" (the default value) whenever I run the server.
In my code the line "option value="none" selected " doesn't work.
<div class="form-group">
<label class="label label-default" for="tour-type">Tournament Type</label>
<select class="form-control" name="TournamentType" [(ngModel)]="tourDetails.TournamentType">
<option value="none" selected>Select</option>
<option value="PSA">PSA</option>
<option value="NationalCircuit">National Circuit</option>
<option value="StateClosed">State Closed</option>
<option value="Asian&World">Asian & World</option>
<option value="International">International</option>
<option value="NonRanking">Non-Ranking</option>
</select>
</div>
Set tourDetails.TournamentType to none in ngOnInit()
ngOnInit()
this.tourDetails.TournamentType ="none"
}
tourDetails.TournamentType needs to be equal to "none" so that it gets selected automatically.
otherwise you can do the following
<option value="" selected>Select</option>
Related
Why isn't the "label option" ((Please Select One)) shown? This is a snippet from an Angular 2 project.
<select [(ngModel)]="selectUser" class="form-control">
<option value="" disabled selected>(Please Select One)</option>
<option value="USER">Assign Users</option>
<option value="TAGS">Tags</option>
</select>
I got a problem when I'm validating this. I can't understand how do I fix it?
<Label for="religion">Select Your Religion</Label>
<select required class="form-control" id="religion">
<option disabled>Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Here is the problem I'm getting on https://validator.w3.org/nu :
The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements.
The name attribute is missing for your select option
Also, the select option should have value=""
<Label for="religion">Select Your Religion</Label>
<select required name="religion" class="form-control" id="religion">
<option value="">Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Like the validator message says
...must have either an empty value attribute, or must have no text content...
Make sure your option has an empty value, like <option disabled value="">
<Label for="religion">Select Your Religion</Label>
<select required class="form-control" id="religion">
<option disabled value="">Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Does anyone know why a form field name would cause Chrome's autofill to stop working correctly? If you open the fiddle I've created in Chrome, you'll notice the Card Number field populates correctly, but not the expiry month and year. If you change the name of the BirthDate.MM select list to BirthDate.Foo and BirthDate.YYYY to BirthDate.Bar; and then and re-run, the credit card autofill works as expected. Now, an obvious suggestion would be to simply disable the bday- autofill and change the those values to "off" or completely remove the autocomplete attribute. Astoundingly, removing the autocomplete attribute or changing the bday- values to "off" on those fields then breaks the address autofill!!!
The solution to the autofill problem itself is simply change the field names. What I want to know is why? Can anyone clarify how I unwittingly poked Chrome's field name sniffing feature?
<fieldset>
<legend>Payment Information</legend>
<div><input autocomplete="cc-number" id="CreditCard_CardNumber" maxlength="16" name="CreditCard.CardNumber" pattern="\d*" required="" type="text" placeholder="Card Number" value="" /></div>
<div>
<label for="CreditCard_ExpirationMonth">Expires:</label>
<select autocomplete="cc-exp-month" id="cardExpirationMonth" name="CreditCard.ExpirationMonth" required="">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select autocomplete="cc-exp-year" id="cardExpirationYear" name="CreditCard.ExpirationYear" required="">
<option value="">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
</select>
</div>
</fieldset>
Use the lower-case version of your names.
For me , using Name as name attribute is not working, autofill recognizes the field as CC !!
If I change it to name , works like a charm.
Hope this helps!
Html Code
<select class="form-control" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="">Please Select</option>
</select>
<button type="button" ng-click="btnSet();">Set Item</button>
Js Code
$scope.Register = {city: ''};
$scope.dtcmbCity = ['Delhi','Bombay','Chennai'];
$scope.btnSet= function () {
$scope.Register.city = "Delhi"
}
My problem is when load the form the data (delhi,bombay,chennai) displayed in the select box. and then i click the set button i want to set delhi into the selection box.
thanks please help
if you are looking for setting the value attribute in the options fields same as the text value than this can help you.
Your current code .
ng-options="item for item in dtcmbCity"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="string:Delhi">Delhi</option>
<option label="Bombay" value="string:Bombay">Bombay</option>
<option label="Chennai" value="string:Chennai">Chennai</option>
</select>
if you use the track by in ng-options , html code is
ng-options="item for item in dtcmbCity track by item"
Result HTML.
<select class="form-control ng-pristine ng-valid ng-touched" id="txtcity" data-ng-model="Register.city" ng-options="item for item in dtcmbCity track by item">
<option value="" class="" selected="selected">Please Select</option>
<option label="Delhi" value="Delhi">Delhi</option>
<option label="Bombay" value="Bombay">Bombay</option>
<option label="Chennai" value="Chennai">Chennai</option>
</select>
Setting the value on button click is working fine.
Hi My current scenario is this: I want a default value too that should select.. Even if select is selected then also acceptable.. but it is blank at first..My code is this
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
I'ave used this code too but not working :(
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option selected="selected">Select</option>
</select>
Checkout my code please.
You can modify your code like this :
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
<option value="">Select</option>
</select>
here is the plnkr : http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview
or you can use ng-init like as mentioned by #zsong
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-init="selectedItem='YourDefaultValue'" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>
Or you can look at this
var myApp = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
Code for to displays by default Select options
<select ng-model="your model" ng-options="your options">
<option selected="selected" value="">Select options</option>
</select>
Your ngModel is selectedItem, so you have to set selectedItem to the value which you want as default in your controller:
//This sets the default value to the first item in your list
$scope.selectedItem = $scope.task.dropdownvalues[0].value
You should not have an option tag if using an ng-option
utilize ng-model instead as below.
<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
in your controller
$scope.selectedItem = dropdown_values[0];
will resolve your issue.
Many times I have spend hours to find out the solution, believe me!
[ 1 ] Select Option with Numbers (Used in Pagination, Page Size Selection)
<select id="select_pagination_pages" ng-model="recordsInPage">
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
Inside Controller, particular page init function, I have inserted 10 as String.
$scope.recordsInPage = "10".toString();
[ 2 ] Second Select Option is with simple yes or no selection.
<select class="rfc_text" id="select_flag" ng-model="rfc.flag">
<option value="yes" selected>YES</option>
<option value="no">NO</option>
</select>
Inside Controller initialized rfc.flag like -
$scope.rfc.flag = "yes";
[ 3 ] This third one Select Option is special and with tiny scenario, where model will only use last four option values, but the first one is selected by default.
<select id="select_timezone" ng-model="timezone_search">
<option value="" selected>Search Entire</option>
<option value="CountryCode">Country Code</option>
<option value="CountryName">Country Name</option>
<option value="TimeZone">Time Zone</option>
<option value="TimeOffset">Time Offset</option>
</select>
Inside page controller init -
$scope.timezone_search = "";
I think three examples would be enough for peoples. :D