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

Question

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

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

对于表单中的其中一个字段，除了显示文本之外，我还想在控件之前放置一个图标，以在文本值之外添加视觉指示器。这不是来自 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>

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

该控件上设置的 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

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

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