Angular Material mat-form-field 输入字段图标

Question

在 Angular 项目中，我有Angular Material mat-form-field我的图标出现在字段左侧的外部<input>，占位符位于右侧：

<mat-form-field appearance="fill" class="fld">
  <mat-icon matPrefix class="my-icon">sentiment_very_satisfied</mat-icon>
  <input
    matInput 
    placeholder="myPlaceholder"
    class="inp"
  />
</mat-form-field>

我试图弄清楚如何将图标放在<input>同一左侧的标签字段内matPrefix

我试过了：

<mat-form-field appearance="fill" class="fld">
  <input
    matInput
    placeholder="myPlaceholder"
    class="inp"
  >
    <mat-icon matPrefix class="my-icon">sentiment_very_satisfied</mat-icon>
  </input>
</mat-form-field>

错误 NG5002：Void 元素没有结束标记“input”

另外，也许如果我必须使用<md-input-container>我已经尝试过import { MdInputModule } from '@angular/material';但app.module.ts不会以这种方式加载。

声明了“MdInputModule”，但从未读取其值

由于我有一些定制设计，这是我的my-comp.component.scss：

mat-form-field {
  width: 100%;
  background-color: #da2ba6;
}

::ng-deep .mat-form-field-infix {
  top: -3px;
  background-color: #da2ba6;
}

.inp {
  width: 90%;
  height: 34px;
  border-radius: 20px;
  background: #fff;
  text-align: right;
}

.my-icon {
  z-index: 1;
  position: relative;
}

.fld {
  width: 100%;
}

这是实际结果，出现在外面：

所需的结果位于输入字段内的右侧，与占位符在一行中，该占位符已经存在于右侧，也在输入字段内（只是不包含在图像中）：

任何意见将是有益的

Answer 1

<input>是一个 void 元素：它并不意味着包含元素。这意味着不允许存在现有的结束标签</input>。

您必须删除此结束标记并将<mat-icon>标记放置在之后（同时仍放入 mat-form-field 标记中）：

<mat-form-field appearance="fill" class="fld">
  <input
    matInput
    placeholder="myPlaceholder"
    class="inp"
  >
  <mat-icon matPrefix class="my-icon">sentiment_very_satisfied</mat-icon>
</mat-form-field>

这是当前带有前缀和后缀的官方示例：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Telephone</mat-label>
    <span matPrefix>+1 &nbsp;</span>
    <input type="tel" matInput placeholder="555-555-1234">
    <mat-icon matSuffix>mode_edit</mat-icon>
  </mat-form-field>
</form>