如何将标签放在 matInput 上，如 bootstrap答案

【问题标题】：How can I put label on top of matInput like bootstrap如何将标签放在 matInput 上，如 bootstrap
【发布时间】：2019-10-06 20:20:52
【问题描述】：

我正在将引导程序形式转换为物质形式。在下面的照片中，我希望 mat-form-field 看起来像第二个引导输入

但我无法在 matInput 上获取标签

我已经尝试过在标签标签中使用 for 属性：

            <div class="form-group">
                <label for="paysAdresse">Pays : </label>
                <mat-form-field appearance="outline">
                    <mat-label>Pays :</mat-label>
                    <input matInput id="paysAdresse"  formControlName="pays" placeholder="pays">
                </mat-form-field>
            </div>
            <div class="form-group">
                <label for="voieAdresse">Voie : </label>
                <input id="voieAdresse" formControlName="voie" type="text" class="form-control form-control-sm" >
            </div>

但它在同一行中为我提供了标签和输入。我怎样才能达到想要的结果？

【问题讨论】：

最好的办法是创建一个带有内容投影的自定义输入元素，使用材料仅对元素进行样式设置。
让我知道我的解决方案是否能解决您的问题
@BogdanB 为什么要使用内容投影我相信这将是一个糟糕的选择，我会坚持使用KISS。使用 CSS 可以轻松实现
@Aminos 我的回答有帮助吗？

标签： angular bootstrap-4 angular-material

【解决方案1】：

使用 Flex 布局可以轻松实现：
使用 flex-direction: column:The flexible items are displayed vertically, as a column
将此添加到您的组件 CSS 文件

.form-group{
  display: flex;
  flex-direction: column;
}

修改后的 HTML

<div class="form-group">
    <label for="paysAdresse">Pays : </label>
    <mat-form-field appearance="outline">
        <input matInput id="paysAdresse" formControlName="pays" placeholder="pays">
    </mat-form-field>
</div>

liveDemo

【讨论】：