如何将两个输入创建为一个表单字段并专门在 Angular Material 中应用样式?
Posted
技术标签:
【中文标题】如何将两个输入创建为一个表单字段并专门在 Angular Material 中应用样式?【英文标题】:How to create two inputs as one form field and apply style specifically in Angular Material? 【发布时间】:2022-01-16 09:12:21 【问题描述】:使用 Angular Material,我正在构建一个带有表单的示例应用程序,该表单具有一个包含两个元素(输入字段和下拉菜单)的表单字段。
所以,我暂时实现了 flex 样式和属性,如下所示:
<div class="row">
<mat-label>Dessert</mat-label>
</div>
<div fxLayout="row">
<mat-form-field appearance="outline" fxFlex="80">
<input matInput type="text" formControlName="">
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="20" style="background-color: yellow;">
<mat-select formControlName="quantity">
<mat-option value="gm">Grams</mat-option>
<mat-option value="kg">Kilos</mat-option>
<mat-option value="mg">Milligrams</mat-option>
</mat-select>
</mat-form-field>
</div>
如果我对 mat-select 应用相同的样式,那么样式也应用不正确。
我需要将背景颜色完全应用于下拉菜单。
我正在学习 Angular Material,因此对此提供的任何解决方案都非常感谢并提前致谢。
【问题讨论】:
【参考方案1】:将类设置为 mat-form-field
Stackblitz 示例 stackblitz
<mat-form-field appearance="outline" class="bg__yellow">
<mat-select>
<mat-option value="gm">Grams</mat-option>
<mat-option value="kg">Kilos</mat-option>
<mat-option value="mg">Milligrams</mat-option>
</mat-select>
</mat-form-field>
然后在css文件中
::ng-deep mat-form-field.bg__yellow .mat-form-field-outline
background-color: yellow;
【讨论】:
嗨@dan vid,谢谢你的回答,但这也没有用,我应该只使用appearance="outline"。 你好@bts_dev,我已经编辑了答案 哇@dan vid,效果很好。非常感谢你! :)以上是关于如何将两个输入创建为一个表单字段并专门在 Angular Material 中应用样式?的主要内容,如果未能解决你的问题,请参考以下文章