Как я могу поставить метку поверх matInput, как загрузчик

Question

Я перевожу форму начальной загрузки на материальную. На следующем фото я хочу, чтобы поле mat-form-field было похоже на второй вход начальной загрузки

Но я не могу получить ярлык поверх matInput

Я пытался использовать атрибут for в теге label:

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

но это дает мне метку и ввод в одной строке. Как мне достичь желаемого результата?

Answer 1

это может быть легко достигнуто с помощью Flex layout:
Использование 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