Question

按照此示例Form field with label，我尝试更改mat-form-field占位符的行为。有三种选择： auto，always和never。

该功能非常好，可以根据占位符开发者想要实现的类型来使用。

实际上它可以全局使用，直接传递给app root的@NgModule：

@NgModule({
  providers: [
    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
  ]
})

并构建如下视图：

<mat-form-field [floatLabel]="never"> // never, auto or always
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

我的问题是，我首先找不到/知道我确实可以/应该导入的位置：MAT_LABEL_GLOBAL_OPTIONS因为它似乎不存在于@angular/material中，如果我检查此GitHub-Repo，我发现它是从@angular/material/core导入的，但它并不适用于我，因为我收到以下错误：

/node_modules/@angular/material/core"' has no exported member 'MAT_LABEL_GLOBAL_OPTIONS'. Did you mean 'MAT_RIPPLE_GLOBAL_OPTIONS'?

是否与我正在使用的资料和CLI版本有关？

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

Answer 1

支持MAT_LABEL_GLOBAL_OPTIONS的最低材料版本为 5.0.0-rc.3 。

因为它是在此文件中导出的：https://github.com/angular/material2/blob/5.0.0-rc.3/src/lib/core/label/label-options.ts，但rc.2没有此文件找不到https://github.com/angular/material2/blob/5.0.0-rc.2/src/lib/core/label/label-options.ts页面。所以尝试更新到RC.3。

请参阅5.0.0-rc.3发行说明：https://github.com/angular/material2/releases/tag/5.0.0-rc.3

form-field：添加对单独标签和占位符的支持（＃8223）（d6fec35），关闭＃6194

此功能添加新的导出常量：MAT_LABEL_GLOBAL_OPTIONS

Answer 2

在Angular 9中，它具有changed again：

从Angular Material版本9开始，MAT_LABEL_GLOBAL_OPTIONS 不建议使用注入令牌。默认的浮动标签行为应该通过MAT_FORM_FIELD_DEFAULT_OPTIONS令牌设置。

因此，当前方法是将{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } }添加到模块的providers数组。

要使其在Angular 11中正常工作

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

在哪里以及如何导入MAT_LABEL_GLOBAL_OPTIONS？

2 个答案: