Если я использую поля mat-form-fields непосредственно в форме, поля отображаются в виде «столбца», как показано ниже.
<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 перемещаются в компонент angular, поля отображаются в виде строки
<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>
и это конечный результат. Form1 (без угловой компоненты) и Form 2 (угловые компоненты полей)
https://stackblitz.com/edit/angular-b3rxbf?embed=1&file=app/input-field.html
Нужно ли что-то изменить в CSS моего компонента?
В вашей первой форме есть max-width: 500px;
, что заставляет вводить данные в оболочку. Вторая форма занимает все доступное пространство, которого достаточно для того, чтобы все поля поместились в одну строку.
В дополнение к ответу, опубликованному Сергом, вы можете изменить значение стиля
input-field
вашего компонентаdisplay
сinline
по умолчанию наinline-block
, чтобы оно соответствовалоmat-form-field
. Это может помочь сделать его поведение более согласованным с mat-form-field.