Angular Material 中没有输入数据时强制标签浮动

Question

在Angular Material中，输入指令的默认设计是<label>中的内容显示在输入元素中，直到用户输入一些内容，此时它会浮动在输入元素，如所有示例中所示 here.

有没有办法强制标签始终浮动在输入框上方，即使没有输入任何数据？

Answer 1

我认为 css class md-input-has-placeholder 是您需要的：

<md-input-container class="md-input-has-placeholder">
  <label>Name</label>
  <input type="text"/>
</md-input-container>

Plunker 示例 here

希望对您有所帮助。

Answer 2

使用 Md-select 这对我有用：

 <md-input-container style="width: 200px;" md-input-has-placeholder>
                  <placeholder>Snack Types </placeholder>
                    <md-select ng-model="selectedOption">
                        <md-option  ng-repeat="item in snacks" >
                            {{item.name}}
                        </md-option>
                    </md-select>
 </md-input-container>

Answer 3

对于md-select元素，占据如下：

<md-input-container class="md-input-has-placeholder">
    <label md-no-float="true" class="md-required">Snack Types</label>
    <md-select ng-model="$ctrl.selection" ng-required="true" md-no-asterisk>
        <md-option ng-value="option.id" ng-repeat="option in $ctrl.selection">{{ opcion.value}}</md-option>
    </md-select>
</md-input-container>

我使用以下 CSS 在输入数据时更改标签并突出显示其他字段：

md-input-container:focus-within > label[class~="md-required"]{
    transform: scale(1);
    font-weight: bold;
}

和下面的CSS这样星号总是有颜色的（你可以放你想要的颜色）：

md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after{
    color: rgb(255,87,10);
}

Answer 4

这是一个官方功能：floatLabel="always"

的 floatLabel 属性可用于更改此默认浮动行为。它可以设置为 never 以在表单字段控件中存在文本时隐藏标签而不是浮动标签。它可以设置为 always 以浮动标签，即使表单字段控件中没有文本。也可以设置为 auto 以恢复默认行为。

<mat-form-field floatLabel="always">
    <mat-label>Both a label and a placeholder</mat-label>
    <input matInput [(ngModel)]="model.value">
</mat-form-field>

来源，见official form-field documentation

Angular Material 中没有输入数据时强制标签浮动

Force label float when no input data in Angular Material

angular-material