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

【问题标题】：Force label float when no input data in Angular MaterialAngular Material中没有输入数据时强制标签浮动
【发布时间】：2015-12-22 23:48:41
【问题描述】：

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

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

【问题讨论】：

标签： angular-material

【解决方案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

希望对你有帮助。

【讨论】：

md-select 怎么样？你如何让它保持在顶部？
没关系通过将标签更改为占位符来让它工作
@Flash 你有机会分享你的代码吗？我想为它构建一个演示。
当然@TopherFangio

【解决方案2】：

这是一个官方功能：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

【讨论】：

【解决方案3】：

使用 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>

【讨论】：

应该是class="md-input-has-placeholder"？
不，不一定是这样，但无论如何它都应该可以工作

【解决方案4】：

对于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);
}

【讨论】：