I use reactive forms within my app. In a certain form I want to display a required (Validators.required) select like this:
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option *ngIf="!dformControl.value"
value="undefined">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
The problem is whether I use value="undefined" or value="" the form control still is set to valid because it got a value. Do not present the value attribute results in value="Choose ...".
Am I using select with reactive forms in a false way or how would I be able to make the option "Choose ..." being not valid??
Assigning initial value of select control to null will do the trick. Try below,
model_property = null
....
this.fb.group({
....
'control_key' : [this.model_property, Validators.required]
...
})
Check this Plunker!!, Look into app/reactive/hero-form-reactive.component.ts file.
I updated the Plunker to include below and it seems to be working,
<select id="power" class="form-control"
formControlName="power" required >
// see the value is set to empty,
<option value="">Choose...</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
Hope this helps!!
What I do is add a blank option and when that is selected since there is no value it is not valid.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option></option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
Related
I have a form which has 2 dropdowns questions.
Depending what the user answers, depends what will happen.
So for example
Are you human? The person answers yes and then another question show asking if they are employed, if they say yes to this then a sign up form will show.
If they say no to either question then some sorry cant sign you up text would show, with a form reset option ideally.
The first question seems to work fine, The issue is, it shows all messages for the second question which should be hidden until the value is selected and only one message should show.
Are you human?<br><select data-bind='value:thisSelect'>
<option value='none'>Select answer</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
</select>
<p data-bind="visible:thisSelect() === 'yes'">
Are you employed?<br>
<select data-bind='value:currentSelect'>
<option value='blank'>none</option>
<option value='form'>show form</option>
<option value='sorry'>Something else</option>
</select></p>
<br><br>
<p data-bind="visible:currentSelect() === 'blank'"> </p>
<p data-bind="visible:currentSelect() === 'form'">Hello, now display the sign up form</p>
<p data-bind="visible:currentSelect() === 'sorry'">Goodbye</p>
And my Knockout JS
var testing = {
thisSelect: ko.observable()
};
ko.applyBindings(testing);
var test = {
currentSelect: ko.observable()
};
ko.applyBindings(test);
My Js fiddle is here https://jsfiddle.net/Chazlie/sdpayfo7/12/
Another version I tried is here http://jsfiddle.net/Chazlie/2exnjm4t/24/ but this just replaces the message from the first question so is not what I was hoping it would do.
Thank you
For anyone else who is struggling with the same issue, I have solved this with the following, I believe the issue was that I was trying to call the bindings twice, instead of creating one variable and controlling it all there.
Are you human?<br><select data-bind="value: selectedChoice">
<option value="none">Select answer</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<p data-bind="visible: selectedChoice() === 'yes'">
Are you employed?<br>
<select data-bind="value: currentSelect">
<option value="blank">none</option>
<option value="form">show form</option>
<option value="sorry">Something else</option>
</select></p>
<br><br>
<p data-bind="visible:currentSelect() === 'blank'"> </p>
<p data-bind="visible:currentSelect() === 'form'">Hello, now display the sign up form</p>
<p data-bind="visible:currentSelect() === 'sorry'">Goodbye</p>
<script>
var viewModel = {
selectedChoice: ko.observable("none"),
currentSelect: ko.observable("none")
};
ko.applyBindings(viewModel);
</script>
I have a express server that passes in information from a mongo db into a ejs file. I am trying to update an item in the db. I want to have the current item information entered in as placeholders.
Here is the ejs code I'm not sure how to select one option based on the info from the db.
<select name="category" id="Category" placeholder="<%= product.category %>">
<option value="vegetable">Vegetable</option>
<option value="fruit">Fruit</option>
<option value="dairy">Dairy</option>
</select>
I understand that to have an option as the placeholder you generally have to use <option selected>
Any suggestions are much appreciated.
Use a Ternary Operator
<select name="category" id="Category">
<option value="vegetable" <%=product.category==='vegetable' ? 'selected' : '' %>>Vegetable</option>
<option value="fruit" <%=product.category==='fruit' ? 'selected' : '' %>>Fruit</option>
<option value="dairy" <%=product.category==='dairy' ? 'selected' : '' %>>Dairy</option>
</select>
I want to store all option texts from dropdown field. Application code is
<select id="regionSelect" onchange="setRegionalManagerInfo()" data-val="true" data-val-required="The Region field is required." name="RegionalInfo.RegionId" class="form-control input-validation-error">
<option selected="selected" value="" data-regionalmanageremail="" data-regionalmanagerphonenumber="" data-regionalmanagerphonenumberextension="">— Select —</option>
<option value="1" data-regionalmanageremail="user1#gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 1</option>
<option value="2" data-regionalmanageremail="user2#gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 2</option>
<option value="5" data-regionalmanageremail="user3#gmail.com" data-regionalmanagerphonenumber="">Region 3</option>
</select>
let array = []
cy.get('select option').each(($option, index )=> {
array.push(Cypress.$($option).text())
console.log(array[index]);
})
Is a bit simpler way to get the data. Right now this data is stored in the array, so you can access the content inside the each as well as outside.
This is more easily done with a combination of .then() and .map(),
cy.get('select option').then($options => {
return [...$options].map(option => option.innerText)
})
I have a simple form:
<form name="simple" id="simple" method="post" action="X.php">
<select name="select">
<option value="none"> Select </option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
</select>
</form>
I want X (X.php) to change with option values.
For example, when user selects 1st, it should change to 1.php.
Is it possible?
Yes you can, example with jquery is as follows:
$("#selectID").change(function() {
var action = $(this).val();
$("#simple").attr("action", action + ".php"); // Can also use .prop("action", action + ".php");
});
Im a bit of a jQuery novice.
I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.
Here is an example if it helps!
Thanks
<form>
<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>
<div class="3">styled content</div>
</form>
You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:
$("select").change(function() {
$("div").attr("class", $(this).val());
});
(EDIT) Change it to:
$("select#np_blog_layout").change(function() {
$("div#changebox").attr("class", $(this).val());
});
What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.
$('select').change(function() {
$('div').attr('class', $(this).attr('id'));
});
First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using jQuery.
<form>
<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>
<div id="styledContent" class="3">styled content</div>
</form>
On JS
//Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);
//The event handler
function changeStyle()
{
//Set class to selected value
$('#styledContent').class($('#SelectElement').val());
}