I have a form that has input fields and and some select dropdowns. All the input fields are being populated correctly from the input object, but the dropdowns are not being selected to the correct value, and always have a blank option first.
This is what the template looks like:
<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField" id="state" required [(ngModel)]="user.state" name="state">
<option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>
</div>
I cant figure out what I am missing.
user.state is a string that contains a 2-letter state abbreviation.
States is an array of US states using 2-letter abbreviation.
The best way I've found is as follows:
<div class="form-group">
<label for="state">State:</label>
<select class="form-control formField" id="state" required [(ngModel)]="user.state" name="state">
<option [ngValue]="undefined" disabled selected>Select a State</option>
<option *ngFor="let state of states" [ngValue]="state">{{state}}</option>
</select>
The disabled attribute does not allow that option to be selected from the dropdown. Hope this helps.
Related
I have a select field that starts with an option that says "Select Location" and want to force the user to choose something before submitting. I saw this article about disabling the Submit button with amp-bind until an option is available, but I would like to use the validation built into amp-form if at all possible.
I have tried using the pattern attribute on the <select> and <option> fields. I have used something similar to pattern="^((?!default).)*$" and multiple variations without any success.
<form
id="contactForm"
method="post"
action-xhr="https://valid.json/endpoint"
custom-validation-reporting="show-all-on-submit"
target="_top">
[...]
<select
id="formLocation"
name="location_id"
pattern="^((?!default).)*$"
required>
<option value="default" disabled selected>Select Location</option>
<option value="newyork">New York</option>
<option value="losangeles">Los Angeles</option>
</select>
<span
visible-when-invalid="patternMismatch"
required
validation-for="formLocation">
Please Choose a Location
</span>
[...]
<input
id="formSubmit"
type="submit"
value="Submit">
</form>
When I click Submit without changing the value, I expect the validation error to appear, but it doesn't. Is it possible to use this validation method with Select fields? Or will I have to just use the aforementioned amp-bind method?
I am assuming that you have added all required script js files form the form. I have provided an example of the rating.
AMP is providing two types of validation one which is for the blank value and another when the pattern does not match. You are missing the blank value validation.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<form action-xhr="here will be your url" custom-validation-reporting="show-all-on-submit" target="_top" method="post" class="wpcf7-form i-amphtml-form amp-form-dirty" novalidate="">
<label for="rating">Select rating</label>
<select name="rating" required="" class="user-invalid valueMissing" id="show-all-on-submit-select" aria-invalid="false">
<option value="">Rate…</option>
<option value="5">Perfect</option>
<option value="4">Good</option>
<option value="3">Average</option>
<option value="2">Not that bad</option>
<option value="1">Very poor</option>
</select>
// You are missing this one
<span visible-when-invalid="valueMissing" validation-for="show-all-on-submit-select">
Please select rating..!!
</span>
// This is for the pattern validation message. If the field is having the value but not does not match with patter this span will provide the validation
<span visible-when-invalid="patternMismatch" validation-for="show-all-on-submit-select">
Please select rating..!!
</span>
<input type="submit" name="submit" value="Submit" class="wpcf7-form-control wpcf7-submit button yellow-button">
</form>
Now, If you need the same solution in your code just put below span I think it must work for you:
<span
visible-when-invalid="valueMissing"
required
validation-for="formLocation"
validation-for="show-all-on-submit-select">
Please Choose a Location
</span>
Thanks
I asked this over at Expression Engine Answer but was directed here. I would like to show a snippet of code only if a certain option is selected in a tag. This is what I have but it does not work.
<select id="size" name="size" value="">
<option value="one">one</option>
<option value="two">two</option>
</select>
{if size.value == "two"}
//code I want to show
{/if}
This is a very simple and probably scilly question but I can't figure it out. I need a label to be on the same line as the associated select, using Bootstrap CSS. The select keeps 'jumping' below the label if I reduce window's width. How is it possible to control this behaviour using Bootstrap classes? I would need to keep both on the same line, whatever window's width is.
Code sample:
<form class="form-inline">
<div class="form-group">
<label for="example">Year</label>
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</form>
See on JS Fiddle here.
Your current solution is default, but you could also make use of columns inside the form. In the next article in bootstrap columns are used, see: http://getbootstrap.com/css/#forms-horizontal
What you are looking for is:
<form class="form-horizontal">
<div class="form-group">
<label for="example" class="col-xs-2 control-label">Year</label>
<div class="col-xs-10">
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</div>
</form>
What would be the best way to do the following:
A drop-down list with COUNTRYies. The list of countries are in json format, retrieved from a web service.
Show or pre-fill the STATE dropdown based on Country selection.
This looks to be a standard requirement but was not able to find a proper solution.
What we have done as of now if using Sightly, make a call to get the Country list in a json and populate, and based on selection show STATES(for USA) or PROVINCES(for Canada) and doing Show/Hide. But was looking for better alternatives.
<!-- COUNTRY -->
<select class="myContactFieldSelect" id="companyCountry" tabindex="22" name="countryID">
<option value="">Please Select</option>
<div data-sly-list.country="${jHelper.pJSON.countryList}" data-sly-unwrap>
<option value="${jHelper.pJSON.countryList[country].countryID # context='html'}">
${jsonHelper.parsedJSON.countryList[country].countryLongName # context='html'}
</option>
</div>
</select>
<!-- STATES or PROVINCES -->
<select class="myContactFieldSelect" id="companyState" tabindex="20" name="stateLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.state="${jHelper.pJSON.stateListUS}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListUS[state].stateLongName # context='html'}</option>
</div>
</select>
<!-- OR -->
<select class="myContactFieldSelect" id="companyProvince" tabindex="21" name="provinceLongName" style="display: none;">
<option selected="selected" value="">Please Select</option>
<div data-sly-list.province="${jHelper.pJSON.stateListCA}" data-sly-unwrap>
<option>${jHelper.pJSON.stateListCA[province].stateLongName # context='html'}</option>
</div>
</select>
My solution will be:
Manage Country/City hierarchy in Taxonomy
Create a Json from taxonomy for Country-City
Use Javascript to read Json and populate correct city for country
Above solution can be enhanced by pre-populating country/city based on user geolocation.
I'm trying to force a <label/> and its <input/> to stay on the same line.
I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
I want this:
Search [______________________]
I get this:
Search
[_____________________]
How do I force them to stay on the same line?
http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview
What you are looking for is referred by Bootstrap as an inline form or horizontal form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.