-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Bug, feature request, or proposal:
When you place a native select
inside a mat-form-field
, many TypeError
s occur.
ERROR TypeError: Cannot read property 'label' of undefined
at MatInput.get [as shouldLabelFloat] (input.es5.js:590)
at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._shouldLabelFloat (form-field.es5.js:535)
at Object.eval [as updateRenderer] (FormComponent.html:10)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458)
at checkAndUpdateView (core.js:19833)
at callViewAction (core.js:20069)
at execComponentViewsAction (core.js:20011)
at checkAndUpdateView (core.js:19834)
at callViewAction (core.js:20069)
at execComponentViewsAction (core.js:20011)
What is the expected behavior?
No errors should occur. The field's placeholder should be on the same line as the select
's arrow until the select
is clicked. Its should then float into a label, similar to how input
s react with the matInput
directive.
What is the current behavior?
Getting TypeError
s. The placeholder is always floating, even when no option is chosen.
What are the steps to reproduce?
StackBlitz was giving me problems, so I created a sample repo showcasing the error: https://github.com/jjreynoldsMatric/native-select-error-angular-material
To reproduce: Create a form with a native select
inside a mat-form-field
with a matNativeControl
directive on it. As far as I've seen, this is all it takes.
What is the use-case or motivation for changing an existing behavior?
To allow support for native select
lists
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
This occurs in both Chrome and Edge.
Angular CLI: 7.0.5
Node: 10.13.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
Package Version
@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.25.1
Is there anything else we should know?
This interferes with the validity of the form. In a project that is not the git repo I provided, the select
is a required field. The errors allow the form to be submitted with no data selected and in an invalid state.