angular - 在 mat-form-field 控件之前设置图像图标

Question

我是 Angular 和构建示例应用程序的新手。

我有一种情况，我正在从 Angular 数据表加载表单。加载的表单具有根据数据库中的数据填充的属性。

对于表单中的其中一个字段，除了显示文本外，我想在控件前放置一个图标，以在文本值之外添加一个视觉指示器。这不是 Angular Material 图标中的图标，而是自定义图像。

我目前面临将自定义图标内联设置到 mat-form-field 的问题。

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

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

请找到说明问题的图片。

下图显示了当我在 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>

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

<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>

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

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

// 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;
}

来自 JIRA 的示例图片

Answer 1

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

<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;
}