如果mat- Form字段位于组件中，则窗体布局中断。

Question

如果在窗体中直接使用mat- form字段，字段将显示在“列”流中，如下所示

<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>

但是，如果席形字段被移动到角分量中，则字段将显示在行布局中。

<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;，强制输入换行。第二个表单占用了所有可用的空间，这恰好就足以让所有字段都放在一行中。