I use the following code in my app with reactive forms.
If I uncomment the [multiple] line, the Choose ... option does not set the dformControl form control object back to status INVALID.
dformControl.multiple by the way returns false. Even if I change the commented line to [multiple]="false", still switching back to the Choose ... option does NOT set the form control status to INVALID.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
/*[multiple]="dformControl.multiple"*/>
<option *ngIf="!dformControl.value"
value="">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
Bind to the multiple property at the select level to a boolean isMultiple. Then you can change it and the select will change as well. Take a look at the this, I change it using a button. plnkr
<select formControlName="cars" [multiple]="isMultiple">
<option></option>
<option *ngFor="let car of cars" >{{car}}</option>
</select>
It seems when adding the multiple property it is affecting the required validator. I was able to just add an extra validator and it worked as expected.
Validators.compose([Validators.required,Validators.pattern('.+')]
Related
I have to provide a dropdown in my form with a large number of options in it but the selected options are to be shown at various places so i have to store the selected option or its id at database too.
<FormGroup>
<Label htmlFor="category">Category</Label>
<select innerRef={input => (this.category = input)} id="select" class="form-control" >
<option value="0">Please select</option>
<option value="1">Mobiles</option>
<option value="2">Television</option>
<option value="3">Washing Machines</option>
</select>
</FormGroup>
This is the gist of the form type i want, there will be other categories in somewhere around 25. I cant have 25 options opening in dropdown. I want to have something like select and input type in dropdown. Also i want to store the option selected by the user and then display it somewhere else.
I have a dropdown that is required for my form. Without Semantic UI everything works as expected. If the user doesn't select anything he gets a message "You must select an optino" or similar from the browser.
<select required>
<option value="" selected="">Please select</option>
<option value="True">Yes</option>
<option value="False">No</option>
</select>
As soon as I style my dropdown with Semantic UI this functionality disappears.
<select class="ui search dropdown" required>
<option value="" selected="">Please select</option>
<option value="True">Yes</option>
<option value="False">No</option>
</select>
This seems to be because Semantic UI hides the original select and adds some bastardized select based on divs. However due to this some of the functionality described above is vanished.
Is there a workaround on this? I want to keep my forms working even with javascript disabled.
Here's a jsfiddle.
As Andrew Pointed out on the issue, this is what you can do:
Hi #Pithikos, you’re correct about the cause of it not working. You could additionally use the validation component that would be falling back to browser validation for clients with disabled JavaScript.
The issue seems to be that Semantic UI converts the select tag into some other HTML including an input tag. The problem is that it doesn't respect the required attribute so the new input tag ends up not having it.
Here's a workaround (after $('.ui.dropdown').dropdown();):
$('.ui.dropdown').each(function(){
$select = $(this).find('select');
$input = $(this).find('input');
if ($select.attr('required') && $input) {
$input.attr('required', 'true');
// Remove required attribute when user or browser focuses on
// the input element and thus getting the selection menu. After
// this event we assume there is a guarantee that the input has
// a value.
$('.ui.dropdown input').on('focus', function(e){
$(this).removeAttr('required');
});
}
});
The workaround works by adding the necessary required attribute. Once that input is focused we assume that a value has been selected and remove the required attribute.
Here's the bug reported on github.
I would like to use a <select> in a form to let the user being able to update values among different <option>. I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html. Here is the sample I am talking about:
<div class="form-group">
<label for="type">Type :</label>
<select class="form-control" [(ngModel)]="order.type" ngControl="type">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
</div>
In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services.
My problem is when I am trying to send the data from the form to the back-end: all the parts with an <input> are OK, but not those with <select> (it returns the original values, and not the one selected).
Does anyone have encountered this or a similar problem?
Thanks for your help!
There is a way to get the value from different options.
check this plunker
component.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
component.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
Been tackling this problem for a few hours.
Checked in the (incomplete) documentation to find an item in the NgSelectOption page called "ngValue"
Not sure if this is the intended use but it seemed to work fine.
So instead of using
[value]="item"
Use:
[ngValue]="item"
Just use ngModel on the select and ngModelChange event if you want to do something when it changes.
In fact I can't reproduce your problem. I created a plunkr with a very simple form with an input and a select. When I submit the form, I have actual values in the bound object. See this plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.
Feel free to tell me if I didn't correctly understand your problem.
Thierry
If you have static, hard-coded values for the select tag like below:
<select #quantity>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
You can do the following:
#ViewChild('quantity') quantity: ElementRef;
console.log(this.quantity.nativeElement.value); // will print value of the currently selected option
I'm creating a template showcase theme that has a set of image blocks and i'm having a custom contact form too. As soon as users selects an image it'll dynamically select from my custom form's select option too.
Now i'm trying to hide my select option field,
My code is
<form action="">
<select name="templates">
<option value="THEME001">THEME001</option>
<option value="THEME002">THEME002</option>
<option value="THEME003">THEME003</option>
<option value="THEME004">THEME004</option>
<option value="THEME005">THEME005</option>
</select>
</form>
So far i tried type="hidden" but its not working. Is there any other way to do it other than using ccs visibility:hidden
You can use jquery's hide function like
$("select").hide();
I think you can remove it by Jquery's remove function.
$("select").remove();
Just pick the select element and you can use these Jquery functions to hide or remove your select element
With javascript you have to use like the following (display = 'none')
document.getElementById('THE ID OF YOUR SELECT BOX').style.display = 'none'
I am using Zend 1.11.10 and I am trying to set a value in a dropdown list. My code is:
$state = new Zend_Form_Element_Select("mytest");
$state->setLabel("mytest")
->setName("mytest");
$state->addMultiOption('Pear','PE');
$state->addMultiOption('Banana','BA');
$state->addMultiOption('Orange','OR');
$state->addMultiOption('Kiwi','KI');
$state->setValue('Banana');
$this->addElement($state);
The problem is that the generated HTML code is:
<select id="mytest" name="mytest" style="opacity: 0;"><option value="PE">Pear</option><option selected="selected" value="BA">Banana</option><option selected="selected" value="OR">Orange</option><option selected="selected" value="KI">Kiwi</option></select>
It is making "selected" all options after "Banana". Is this a bug in Zend?
Looks to me like you're using a non-standard FormSelect view helper. For starters, your <option> value attribute and text values are reversed and you have no label attributes.
Eg, for
$state->addMultiOption('Pear','PE');
the generated markup should be
<option value="Pear" label="PE">PE</option>
I'd also hazard a guess that there's some JavaScript playing with the DOM due to the opacity style attribute.
Using your code exactly I get:
<select name="mytest" id="mytest">
<option value="Pear" label="PE">PE</option>
<option value="Banana" label="BA" selected="selected">BA</option>
<option value="Orange" label="OR">OR</option>
<option value="Kiwi" label="KI">KI</option>
</select>
this is also with 1.11.10. Are you using custom form classes or anything else that might be affecting it?