如果mat-form-field在组件中，则表单布局会中断

Question

如果我直接在表单中使用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-form-fields移至一个角度组件，则这些字段将以行布局显示

<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进行任何更改吗？

Answer 1

您的第一个表单具有max-width: 500px;，强制输入要换行。第二种形式占用了所有可用空间，恰好足以使所有字段排成一行。