Макет формы ломается, если mat-form-field находится в компоненте

Question

Если я использую поля формы mat непосредственно в форме, поля отображаются в потоке «столбец», как показано ниже:

<h1>Form 1</h1>
<form class="example-form">
  <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
 <mat-form-field >
  <input matInput  placeholder='Name' value='world' readonly='true'>
</mat-form-field>
</form>

, если поля формы mat перемещаются вугловой компонент, поля отображаются в макете строки

<h1>Form 2</h1>
<form class="example-form1">
  <input-field></input-field>
  <input-field></input-field>
  <input-field></input-field>
  <input-field></input-field>
</form>

, где шаблон компонента поля ввода определяется следующим образом:

<mat-form-field >
  <input matInput  placeholder='Name' value="world" readonly='true'>
</mat-form-field>

, и это конечный результат.Форма 1 (без угловых компонент) и Форма 2 (поля угловых компонентов)

https://stackblitz.com/edit/angular-b3rxbf?embed=1&file=app/input-field.html

Есть ли какие-либо изменения, которые я долженсделать с моим компонентом CSS?

Answer 1

Ваша первая форма имеет max-width: 500px;, заставляя входы обернуть.Вторая форма занимает все доступное пространство, которого вполне достаточно для размещения всех полей в одной строке.