Angular Material：如何将 floatPlaceholder 设置为从不

Posted 2023-02-18

【中文标题】Angular Material：如何将 floatPlaceholder 设置为从不

【英文标题】：Angular Material: how to set floatPlaceholder to never

【发布时间】：2018-01-08 22:58:08

【问题描述】：

库：Angular 材质 (material2)

我想使用 MdInputContainer 的 floatPlaceholder 指令，以便占位符/提示永远不会浮动。

我没有看到它在文档中说明它期望的值：

@Input() floatPlaceholder：占位符是否应始终浮动，从不浮动或在用户键入时浮动。

取自：https://material.angular.io/components/input/api

<md-input-container [floatPlaceholder]="false">
  <input type="text" mdInput placeholder="Search...">
</md-input-container>

我已经尝试了 false 和 "never" 作为我最好的猜测值，但两者都不能阻止占位符在输入上方浮动。

【参考方案1】：

您可以将 floatPlaceholder 输入设置为：auto、always、never。

<md-input-container floatPlaceholder="never">
          <input type="text"
                 mdInput
                 placeholder="Search...">
</md-input-container>

---

更新（Angular Material 6）：

现在你必须使用floatLabel:

<mat-form-field floatLabel="never">
    <input matInput placeholder="Search...">
</mat-form-field>

Stackblitz Demo

【参考方案2】：

您也可以在 AppModule 中将其设置为全局设置，如下所示：

将MAT_FORM_FIELD_DEFAULT_OPTIONS 导入您的AppModule

import  MAT_FORM_FIELD_DEFAULT_OPTIONS  from '@angular/material';

将其传递到模块的 providers 数组中（... 省略了其他代码）：

@NgModule(
  imports: [...],
  declarations: [...],
  providers: [
     provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue:  float: 'never'  ,
    ...
  ],
  bootstrap: [...]
)
export class AppModule 

【讨论】：

我想你的意思是： import MAT_FORM_FIELD_DEFAULT_OPTIONS from '@angular/material/form-field'; ... 提供：MAT_FORM_FIELD_DEFAULT_OPTIONS，useValue： floatLabel：'从不'，，

【参考方案3】：

对于 Angular 10 这很好用

import  NgModule  from '@angular/core';
import  MatAutocompleteModule  from '@angular/material/autocomplete';


  @NgModule(
    exports: [
      MatAutocompleteModule,
      // other modules needed
    ],
  providers: [
     provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue:  floatLabel: 'never'  ,
  ],
  declarations: [],
)
export class MaterialModule