在 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: 空元素不存在结束标记"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%;
}
这里是实际结果,出现在外部:
期望的结果在右侧内部的输入字段中,与占位符在同一行,占位符已经存在于右侧,也在输入字段中(只是未包含在图像中):
任何建议都将有所帮助