在 mat-form-field 控件之前设置图像图标 [英] Set an image icon prior to mat-form-field control

问题描述

我是 angular 和构建示例应用程序的新手.

我遇到了从角度数据表加载表单的情况.加载时的表单具有根据数据库中的数据填充的属性.

对于表单中的一个字段，除了显示文本之外，我想在控件之前放置一个图标，以在文本值之外添加一个可视指示符.这不是来自angular material icon的图标，而是自定义图片.

我目前在将自定义图标内联设置到 mat-form-field 时遇到问题.

当我在 mat-form-field 控件中包含图像时，我看到图标在一行中，而文本字段值在另一行中.

当我在mat-form-field控件外设置图片图标时，字段标签只在字段值上方，图片图标显示在外面，看起来很别扭.

请找到表明问题的图片.

下图表示当我在 mat-form-field 之外有图像控件时出现的问题.

<img src="../../assets/icons8-task-480.png" width="24px" height="24px"><mat-form-field class="angularformcss no-line" floatLabel="always"><input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType"></mat-form-field>

当我将图像控件带入 mat-form-field 时，图像和字段值位于不同的行上.

<mat-form-field class="angularformcss no-line" floatLabel="always"><img src="../../assets/icons8-task-480.png" width="24px" height="24px"><input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType"></mat-form-field>

另外，有没有办法以左右方式而不是从上到下设置角度材料的表单字段控件的标签字段，并增加标签控件的大小.目前，标签字段在我看来已经褪色.

在这个控件上设置的CSS类有如下代码

//这是设置输入 mat-form-fields 的大小..angularformcss {字体大小:14px；文本对齐:左；}//这是删除输入控件下方的行.::ng-deep .no-line .mat-form-field-underline {显示:无；}

来自 JIRA 的示例图片

解决方案

为 img 添加 matPrefix 指令并更改一些 css 可以根据需要获取 mat 输入.

<mat-form-field class="angularformcss no-line" floatLabel="always"><img matPrefix src="https://image.flaticon.com/icons/png/512/23/23765.png" width="24px" height="24px"><input matInput placeholder="问题类型" id="issueType"></mat-form-field>

css

:host ::ng-deep .mat-form-field-label-wrapper {左:-24px；/* 这是图像的宽度 */}:host ::ng-deep .mat-input-element {左边距:5px；/* 在输入的左边添加一个边距，你可以根据需要删除它 */}.angularformcss img {底边距:-5px；}

I am a newbie to angular and building a sample application.

I have a situation where I am loading a form from a angular data table. The form on load has attributes that are populated based on data from the database.

For one of the fields in the form, apart from displaying the text, I would like to place an icon before the control to add a visual indicator beyond the text value. This is not an icon from the angular material icon but a custom image.

I am currently facing issues with setting the custom icon inline to the mat-form-field.

When I include the image within the mat-form-field control, i see that icon is in one row and the text field value is in another row.

When I set the image icon outside the mat-form-field control, the label of the field is only above the field value and the image icon shows outside and looks awkward.

Please find the image indicating the issue.

Image below indicates the problem when i have the image control outside of the mat-form-field.

<div class="form-group" *ngIf="showDetailForm">
          <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

When i bring the image control within the mat-form-field, the image and the field value are on different lines.

<div class="form-group" *ngIf="showDetailForm">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

Also, is there a way to set the label field of form field control of angular material in left-right fashion rather than a top-bottom and also increase the size of the label control. Currently the label field looks faded to me.

The CSS classes set on this control have the following code

// This is to set the size of the input mat-form-fields.
.angularformcss {
    font-size: 14px;
    text-align: left;
} 

// This is to remove the line underneath the input controls.
::ng-deep .no-line .mat-form-field-underline {
    display: none;
}

Example Image from JIRA

解决方案

Add matPrefix directive for img and change some css can get your mat input as your need.

<div class="form-group">
    <mat-form-field class="angularformcss no-line " floatLabel="always">
        <img matPrefix src="https://image.flaticon.com/icons/png/512/23/23765.png" width="24px" height="24px">
        <input matInput placeholder="Issue type" id="issueType">
    </mat-form-field>
</div>

css

:host ::ng-deep .mat-form-field-label-wrapper {
  left: -24px; /* this is the width of image */
}

:host ::ng-deep .mat-input-element {
  margin-left: 5px; /* adding a margin to left of input you can remove it if you want */
}
.angularformcss img {
  margin-bottom: -5px;
}

这篇关于在 mat-form-field 控件之前设置图像图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！