css - 如果 mat-form-field 在组件中,表单布局会中断
问题描述
如果我直接在表单中使用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>
其中 input-field 组件的模板定义如下:
<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;
,强制输入换行。第二种形式占用所有可用空间,恰好足以让所有字段都放在一行中。
推荐阅读
- angular - 如何使用带有外部 IdentityServer 的 OAuth2 保护 Angular 代码
- python - 将值和函数重新序列化到 Python 中的新环境中
- python - 在python中循环遍历数据框字典并将字典中的每个数据框与单个数据框合并
- docker - 发布容器端口时如何使用另一个容器的网络堆栈
- c# - C#计数计时器不会停止计数
- python - Netmiko OSError:在 send_command_expect:Destination 中从未检测到搜索模式
- ruby-on-rails - Rails Mailgun::CommunicationError 403 仅在生产中
- azure - 我如何知道 Azure VMSS 的特定实例上安装了哪个映像版本?
- r - 将具有特定名称的空列列表添加到 R 中的 df 列表
- python - 禁用特定扩展显示的 vscode 工具提示提示