Angular Material：如何將 floatPlaceholder 設置為從不

Question

庫：角材料（ 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"作為我最好的猜測的值，但都不能阻止占位符浮動在輸入上方。

Answer 1

您可以將 floatPlaceholder 輸入設置為：auto、always、never。

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

---

更新（角材料 6）：

現在你必須使用floatLabel ：

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

Stackblitz 演示

Answer 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 {}

Answer 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 { }