md-select
jelbourn opened this issue · comments
When we can expect a version of select to be available.
Please make a editable md-select!
Both blockers closed. Can we expect md-select soon?
It would be great if md-select and other similar components (menu, dialog, etc) were based on a foundation component such as material 1 md-panel (https://material.angularjs.org/latest/api/service/$mdPanel). Is the team considering this as a design?
@jelbourn when do you anticipate the design doc being ready? It's not yet up in the Design doc directory. Since you'll support multi-select (mentioned here), will you also support searching the list (i.e. filtering down the list) in the case of very large lists - to facilitate finding an item less cumbersome? Also, a check-all/clear for multi-select?
There is the possibility of being implemented some things this plugin JS? http://selectize.github.io/selectize.js/
this is an essential component, looking forward to it.
Hi all congratulations for this project I think is gonna be awesome, but just one thing that I'm seeing here and is the order of components that has been release until now, I think it would better to do things like layouts size, auto-size by device type, and also take care about the most need common form components for example I would be priorize md-select than md-menu or md-tool bar or focus more on md-grid than md-tooltips.
This project is awesome. I was surprised to find that the select field was so low on the priority list. I'm currently working on a form that requires them. I ended up using materialize-css but I know this is a better solution in the long run.
@mesopotamia - Any pointers on how you integrated materialize-css with A2 material? Aren't there overlaps?
I ended up using only materialize-css for now and will switch back to material2 when it's ready. However, I can imagine that you can use material 2 and import the select.scss from material 2. Dont forget you will need to also import the js module for adding the functionality.
@kara thx for the design doc. Looks great! I see the md-select-header will support my previous requests (filtering, check all, uncheck all). I have 3 questions/requests.
- You mention the size of the menu will be 5 items. Will there be a way to control that to view more than 5 items?
- For very large lists, I've had to add paging to my select list to address performance problems. Do you plan to add something like md-select-footer which could be used to address this?
- Will the menu know if it needs to drop up / drop down based on the location of the md-select in the viewport?
@mesopotamia @jelbourn
can you please guide me through adding select tag coz I've tried doing everything I could to make it work along with material.
.
It says "I'm a select element" and shows no SELECT drop down on the page.
....
I'll be ok even if I could have a simple html select working without any styling.
@jelbourn
Yeah sure... of course, I've read that it is under development. ... and you guys are doing real cool stuff..
.
What I'm asking is that do you know the real cause of "I'm a select element" and how can I place a simple select tag instead of md-select? Because simple select tag isn't working either.
Do you know a temporary workaround??
@haseeb-ahmad Using normal select's shouldn't been a problem. I'm using them myself, but I'm not on the lastest version so it might have changed recently
@haseeb-ahmad Normal selects work normally. The only selector we use is md-select.
If you guys really need an "md-select" right now, check out this one (while the material2 gets done)
What is the max number of options md-select will support? Will the items be in the DOM even if the menu isn't open?
Thanks!
I can't wait for this...
What setting needed to download MdSelect with npm or Is it a manual pull? Currently I don't see in it under node_modules/@angular/material.
@ManishJainGitHubUser nothing then to upgrade to alpha-11. Then you can use it out if the box by adding md-select and md-option
Thanks. This worked after a lot of npm update trouble. Here is the syntax:
<md-select [(ngModel)]="selectedState" placeholder="State">
<md-option *ngFor="let state of states" [value]="state.value">
{{state.title}}
</md-option>
</md-select>
hey, I have this issue
"Can't bind to 'value' since it isn't a known property of 'md-option'"
With
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/material": "2.0.0-alpha.11-3",
Thanks for your help
@alan345 Please provide a plunker to reproduce your issue :)
Quick question, was it supposed to be working with Reactive Forms yet?
@vdclouis tag support will be part of a different component(chips / autocomplete), ajax loading maybe, but you can really handle that yourself.. another important feature of select2 is search, but since there is not material design spec for that type of select I don't think that will be in either
@phmello yes
No luck, I've tried
<md-select [formControl]="filterInput">
<md-option [value]="LON">LON</md-option>
<md-option [value]="TAN">TAN</md-option>
<md-option [value]="MEC">MEC</md-option>
<md-option [value]="ASX">ASX</md-option>
</md-select>
and when I try
this.filterInput.setValue('ASX');
Nothing happens, the filterInput has the value 'ASX' but the option is not selected, am I missing something?
Anyone having issues with md-radio-button and formControlName? The following is hanging chrome entirely - can't even kill it with task manager!
<md-radio-button value="1" formControlName="roundingOption"></md-radio-button>
@phmello when are you calling that set value? I've had this problem when I tried setting it before md-options were generated.. try delaying it.
I'm using Angular 2.3.0 and MD.alpha.11-3. I added the md-select below to a template style form. It 'works' in the sense that the selections display, but they display at the bottom of the page, not under the select input display in the form. When I scroll to the bottom and click, the selection shows in the element. Is this a CSS problem or an md-select problem?
<md-select id="country" name="country" class="required" aria-labelledby="country" [(ngModel)]="residenceModel.country"
i18n-placeholder="select country placeholder" placeholder="Country">
<md-option [value]="US" i18n="select US">United States</md-option>
<md-option [value]="CA" i18n="select CA">Canada</md-option>
</md-select>
The controller has this line of code in the export class section
residenceModel = new ResidenceModel( '', 'NY', '', '','', '', '', '');
That's all the code there is to affect md-select. The i18n stuff has no impact. I tried it with and without.
@jelbourn @kara I saw that in the md-select project there is a task NONE option but I couldn't see an issue for that.
Is this going to be just another md-option without value which will be added by the user? And if so what do you think about community contribution for that functionality? I will be happy to try to implement it.
@phmello & @mLaird
Your property value is as if they are variables and not strings. It should be [value]="'string'" not [value]="variable"
<md-select id="country" name="country" class="required" aria-labelledby="country" [(ngModel)]="residenceModel.country"
i18n-placeholder="select country placeholder" placeholder="Country">
<md-option [value]="'US'" i18n="select US">United States</md-option>
<md-option [value]="'CA'" i18n="select CA">Canada</md-option>
</md-select>
Here is a plunker with it working as it should.
https://embed.plnkr.co/cAvpDqkzdD6M33RKkePE/
Please excuse my ignorance but the npm site does not show the latest 2.0.0-alpha.11 release, it says the latest version is v2.0.0-alpha.8-2?
https://www.npmjs.com/~angular2-material
how do i npm install the latest version so i can get my hands on the new md-select
Inside the form the md-select will become red after the second touch of the md-select selector...why is that?? https://plnkr.co/edit/vloidO?p=preview
I already disabled the $warn: map-get($theme, warn) in the _select-theme.scss but still not working
@dreweird Required selects will become red when invalid and touched (i.e. when there is no value and you've blurred the control). There is a current bug where the select can turn red when the parent form is invalid/touched, but we have a fix for that here. You'll have to wait for it to be merged into master and released before you'll see the change. It's not going to be updated in plunker right now.
@Gallopaway It looks like you're looking at the old NPM package. You'll want the @angular/material package here.
@belev The NONE option will need design and is on my current work board. I wouldn't take on anything with the select right now, given that it's still new and in flux.
@mLaird Do you have a plunker repro for that? Perhaps related to #2178
@kara ok, thanks! I will then just keep an eye on the progress of the select.
Hi,
I'm having trouble getting a change event to trigger a function.
(change)="updatedMobile(mobile_bid_op)"
A click event works but not the change.
Any help?
Thanks
@bnatter I had the same problem, I ended up adding a FormControl to my component and linking the md-select to it with [formControl]="myFormControl". Then you can subscribe to the "valueChanges" property of the form control, which is an Observable. This is what we're doing for now (inside ngOnInit), hope this helps.
this.myFormControl = new FormControl();
this.myFormControl.valueChanges.subscribe(val => this.myFunction(val));
Hello,
From what I see in the code, multi select is not implemented yet, any ETA on this?
Thanks.
In the md-select element, style set to:
.md-select-trigger { color: rgba(0, 0, 0, 0.38); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
while in the md-input the style is set to:
.md-input-underline { border-color: rgba(0, 0, 0, 0.38); }
That causes inconsistency with the colors of the borders of input and select elements.
Not mentioning the fact they are not aligned with each other (fixed locally by adding margins 10px to top and bottom of the md-select element).
@narkissbv See #2167 and #2124.
@bnatter There isn't a change event on the select; only form directives are supported at this time. If you want to listen to changes, you'll want valueChanges or ngModelChange.
@kara Thank you! Are there plans for the md-select to have the change event in the future?
@yosefdishinger, @kara : Thanks for the help.
@ManishJainGitHubUser Thanks a lot for the syntax!
Hi,
I create a form for editing. The form contains several 'md-select' which uses the data from the server.
after the main request, I bind (two-way) values with fields in my form, if the data for the option to 'md-select' don't loaded, it field is empty on the screen.
Please, tell me how to correct fill my form.
Is it correct run all slave requests into ngOnInit, main request start execute into ngAfterViewInit lifecycle?
Couldn't find a reference, so I'm asking here. Any chance to control the height of the <md-select> element? My boss doesn't like to have a scroll unless it's needed (e.g: the list is higher than the viewport).
enclosed a screenshot of our <md-select> element with an inner-scroll we would like to get rid of. There are 3 more items in the list, and the viewport has a lot of room for all of them to fit nicely.
@narkissbv you can custom with css by doing something like:
.md-select-panel {
max-height: 320px
}
@rafaellyra Kinda hoped for something more sturdy, that will calculate the available height from the top of the <md-select> element, to the bottom of the window (viewport). They already do some positioning magic in that element, so I hoped for a size control as well.
The problem with CSS is that I don't know how many items I will have in each <md-select> element, nor the available height from the top of the element to the bottom of the screen. Those can only be done with JS (or TS with Angular2).
@narkissbv there is no position change on .md-select-panel itself, just on the overlay, the way it works now is something like: check if it fits from the element to the bottom of the view, in case it's true, position it to the bottom, in case it is false check if it fits from the element to the top of the view in case it's true position it to the top, if both are false position it to the bottom, given that, something like:
.md-select-panel {
max-height: calc(50vh - 30px); //30px should be the height of the select element
}
should solve your problem of having a scrollbar when there is space on the viewport
How can we change the color of the select text and separator to other theme style, the "color" property does not work neither "dividerColor"
After putting select under input inside the card-content there some positioning issues (see screen).
How can I preselected an option? when I tried to use [selected], there is an error.
@vivian7169 you need to use ngModel on md-select
public itemSelected: number = 2;
<md-select name="items" [(ngModel)]="itemSelected">
<md-option value="1">item1</md-option>
<md-option value="2">item2</md-option>
</md-select>
Hello,
Would it be possible to use [ngValue] instead of [value] to bind with a model?
Something like :
<md-select name="items" [(ngModel)]="itemSelected">
<md-option *ngFor="let poi of pois" [ngValue]="poi">{{poi.name}}
</md-select>
Thanks!
@alan345 Make sure to import @angular/forms in your module.
import {MaterialModule} from "@angular/material";
import {FormsModule} from '@angular/forms';
@NgModule({
imports: [MaterialModule.forRoot(), FormsModule]
})I think I got a scenario
this.createForm = formBuilder.group({
fieldName: ['']
});
and them
<md-select formControlName="fieldName" *ngIf="expression">
<md-option *ngFor="let option of options" [value]="option.value">
{{option.text}}
</md-option>
</md-select>
When the expression is true and the component is rendered the value is not selected.
I'm using @angular/material@2.0.0-beta.1 and I'm facing the problem that the selection list is always displayed at the bottom of the page. How can I fix that?
Finally I solved the problem by adding a CSS file as discribed in: https://material.angular.io/guide/theming. Since we are working with CLI I did as follows:
If you're using Angular CLI, this is as simple as including one line in your style.css file:
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
I'm having an issue with md-select not working with reactive forms, it seems the initial value is not getting set, am I doing something wrong or is this a bug? Here is a plnkr....
@zerouno62, I had the same problem menu would shoot up to the top left, had to put position:absolute on the .cdk-overlay-pane class. I used a <style> block in index.html, not ideal but solved my issue
@zerouno62 at least you have a selection list
My md-select doesn't create an overlay, so I'm left with a non-reactive md-select (using 2.0.0-beta.1, and Electron if that's relevant)
Any idea why?
Toggling theme not applying for md-select. By default it is applying the light-theme even though we are toggling the theme from light to dark..
This was asked previously, but there is no answer - ngValue binding doesn't work with md-option, how can we use md-select with objects as option values?
I am using beta-1 Initial value is not set when data for options are loading form api.
@BhattaRj
If you set the initial value in the model ([(ngModel)]="...") the corresponding option will be selected.
Hello, I have the same problem as @BhattaRj. if I do this:
<select placeholder="Partner" [(ngModel)]="model.partnerGuid"><option *ngFor="let partner of partners" [value]="partner.guid">{{ partner.name }}</option></select>
The value gets preselected according to the binding. If i change it to
<md-select placeholder="Partner" [(ngModel)]="model.partnerGuid">
<md-option *ngFor="let partner of partners" [value]="partner.guid">
{{ partner.name }}
</md-option>
</md-select>
(literally add md- prefix to tags) the value is NOT preselected. That's also when using API for filling options, angualr/material 2.0.0.-beta.1, angular 2.4.3
I'm closing this thread since it's gone somewhat off-topic. If you encounter issues with md-select please file an issue following the issue template. For questions / help, try gitter and Stack Overflow.