Angular - как отобразить 3 formControlName на 1 строку?

Question

В настоящее время приведенный ниже код отображается в виде 3-х отдельных строк.

<div fxLayout="column">
    <label>Some Label</label>
    <mat-form-field class="hide-underline" floatLabel="never">
        <input formControlName="elementA" matInput readonly> 
        <input formControlName="elementB" matInput readonly> 
        <input formControlName="elementC" matInput readonly>
    </mat-form-field>
</div>

Как получить рендеринг в одну строку, например: elementA-elementB-element C вместо?

Answer 1

    <mat-form-field class="hide-underline" **class='display:flex'** floatLabel="never">

Answer 2

Поскольку вы используете @angular/flex-layout, вы должны добавить fxFlex к каждому <input>, чтобы они отображались в одной строке.

<div fxLayout="column">
    <label>Some Label</label>
    <mat-form-field class="hide-underline" floatLabel="never">
        <input fxFlex formControlName="elementA" matInput readonly> 
        <input fxFlex formControlName="elementB" matInput readonly> 
        <input fxFlex formControlName="elementC" matInput readonly>
    </mat-form-field>
</div>

Рабочий пример StackBlitz: https://stackblitz.com/edit/angular-stackoverflow-60732248

Answer 3

Вы можете установить css как display: flex в поле mat-form-field, чтобы они отображались в одной строке