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

Posted 2023-03-13

【中文标题】如果 mat-form-field 在组件中，表单布局会中断

【英文标题】：Form layout breaks if mat-form-field is in a component

【发布时间】：2019-02-18 06:32:36

【问题描述】：

如果我直接在表单中使用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 移动到 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 做任何更改吗？

【问题讨论】：

除了 Serg 发布的答案之外，您可能希望将 input-field 组件的 display 样式值从默认的 inline 更改为 inline-block 以匹配 mat-form-field。这可能有助于使其布局行为与 mat-form-field 更加一致。

【参考方案1】：

您的第一个表单有max-width: 500px;，强制输入换行。第二种形式占用所有可用空间，恰好足以让所有字段都放在一行中。