Angular mat-form-field 输入和标签

Question

I use an angular material component to make a form, so I use mat-form-field.

I would like to have the label on the left and a text input field on the right. How can I do this? In the example on the official doc it is not possible to do this.

html

<div class="container">
  <mat-form-field appearance="legacy">
    <mat-label>Nom</mat-label>
    <input matInput formControl="nom">
  </mat-form-field>
</div>

expected result: https://i.stack.imgur.com/5r63Z.jpg

Answer 1

You can use Flexbox CSS: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And you will have something like this:

 .row { display: flex; flex-direction: row; }

 <div class="container"> <mat-form-field class="row" appearance="legacy"> <mat-label>Nom:</mat-label> <input matInput formControl="nom"> </mat-form-field> </div>