如何将两个输入创建为一个表单字段并专门在 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 中应用样式?的主要内容,如果未能解决你的问题,请参考以下文章

如何专门为两个输入分配不同的功能

为一个实体字段呈现多个表单字段

如何创建一个通用的 MS Access 表单?

从 json 动态创建的 Javascript 表单输入,需要将对象映射到另一个对象的正确字段并保存

用户通过PHP填写表单后如何自动生成页面?

Django ForeignKey 表单字段小部件