Question

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

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

Answer 1

我认为css类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这对我有用：

didReceiveRemoteNotification

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 属性可用于更改此默认浮动行为。可以将其设置为从不，以在表单字段控件中存在文本时隐藏标签而不是浮动标签。可以将其设置为始终以浮动标签，即使表单字段控件中没有文本也是如此。也可以将其设置为自动以恢复默认行为。

<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

4 个答案: