Following this example Form field with label, I tried to change the behavior of mat-form-field
placeholder. There are three options:
auto
, always
and never
.
The feature is really a good one and can be used depending on which kind of placeholder developer would like to implement.
And actually it can be used globally passing it directly to @NgModule
of the app root:
@NgModule({
providers: [
{provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
]
})
and building the view as following:
<mat-form-field [floatLabel]="never"> // never, auto or always
<input matInput placeholder="Simple placeholder" required>
</mat-form-field>
My issue is that I first don't find/know where I exactly can/should import: MAT_LABEL_GLOBAL_OPTIONS
as it seems that it doesn't exist in @angular/material
and if I check on this GitHub-Repo, I see that it's imported from @angular/material/core
, but it doesn't work form me, cause I get the following error:
/node_modules/@angular/material/core"' has no exported member 'MAT_LABEL_GLOBAL_OPTIONS'. Did you mean 'MAT_RIPPLE_GLOBAL_OPTIONS'?
Has it to do with the material and CLI version I'am using?
Angular CLI: 1.5.0
Node: 8.0.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1
In Angular 9 this has changed again:
As of Angular Material version 9, the
MAT_LABEL_GLOBAL_OPTIONS
injection token is deprecated. The default floating label behavior should be set through theMAT_FORM_FIELD_DEFAULT_OPTIONS
token.
Current way is therefore to add { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } }
to the providers array of your module.
For this to work in Angular 11
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
The minimum version of material to support MAT_LABEL_GLOBAL_OPTIONS
is 5.0.0-rc.3.
Because it is exported in this file: https://github.com/angular/material2/blob/5.0.0-rc.3/src/lib/core/label/label-options.ts, but the rc.2 don't have this file https://github.com/angular/material2/blob/5.0.0-rc.2/src/lib/core/label/label-options.ts page not found. So try to update to RC.3.
See the 5.0.0-rc.3 release note: https://github.com/angular/material2/releases/tag/5.0.0-rc.3
form-field: add support for separate label and placeholder (#8223) (d6fec35), closes #6194
this feature add new export const: MAT_LABEL_GLOBAL_OPTIONS
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With