Angular Material mat-form-field的输入框图标。

Question

Angular Material mat-form-field的输入框图标。

9

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

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

期望的结果在右侧内部的输入字段中，与占位符在同一行，占位符已经存在于右侧，也在输入字段中（只是未包含在图像中）：

任何建议都将有所帮助

- user11137294

1

在 https://material.angular.io/components/form-field/overview 中，如果您将 "matSufix" 替换为 "matPrefix"，似乎可以工作 :( - Eliseo

1

@Eliseo 你好，是的，matPrefix 将图标设置在输入字段前面和外部的标签一样。我正在尝试弄清楚如何将它放到输入字段内部。 - user11137294

1

在这个分支的 StackBlitz https://stackblitz.com/edit/angular-kwqgg2?file=src/app/form-field-appearance-example.html 中，图标是内部的，请检查您是否有 CSS 或者您的表单是否在一个使图标消失的 div 内。 - Eliseo

1

尝试这个答案：https://dev59.com/KqDia4cB1Zd3GeqPLeoq - matsch

1

@Eliseo 我已经使用 CSS 编辑了我的帖子，因为我有一些自定义样式。请检查我的编辑。 - user11137294

@matsch 你好，是的，这需要 'import { MdInputModule } from '@angular/material'，但由于某些原因我无法导入它，来自Mat...Module-s的其他所有内容都可以正常工作，但不包括 '@angular/material'。 - user11137294

3个回答

1

我创建了一个小例子来演示正确使用 matPrefix 和 matSuffix。您不需要设置任何额外的 CSS，但是：请在您的 *module.ts 中导入正确的 Module，在您的 angular.json 中导入样式表！

https://stackblitz.com/edit/angular-ivy-12pssg

- Janos Vinceller

0

我喜欢将.css文件放在styles.scss中（以便在整个应用程序中共享）。如果我们不能影响其他组件，我们会添加一个“前缀”，例如.special。

我想象中有一个.css文件（在styles.css中重复）

.special.mat-form-field{
background-color:pink;
}
.special.mat-form-field-should-float .mat-form-field-label-wrapper
{
  top:-2.5rem;
  left:-1em;
}

.special.mat-form-field-appearance-fill .mat-form-field-underline::before, .special.mat-form-field-appearance-fill .mat-form-field-ripple {
    width: 80%;
    left: 10%;
    top:0.25em;
}
.special .mat-hint{
  margin-top:1rem
}
.special.mat-form-field-appearance-fill .mat-form-field-flex {
  margin-top:0;
    border-radius: 20px;
    padding: 0 .75em 0 .25em;
    background-color: white;
}
.special .mat-form-field-wrapper{
  padding: .5em .5em;
}
.special .mat-form-field-prefix, .special .mat-form-field-suffix {
    top: 0em; 
}
.special.mat-form-field-appearance-fill .mat-form-field-infix {
    padding: 0.25em 0 0.25em .125em;
    margin-top:0em;
}
.special.mat-form-field-appearance-fill .mat-form-field-infix >input{
    padding: 0.125em 0 .625em .125em;
    margin-top:-2em;

}

请查看stackblitz

免责声明：实际上我是一个“不太擅长设计”的人，我不知道是否有更好的方法来做这件事

- Eliseo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gérôme Grignon · Accepted Answer

<input>是一个空元素：它不应该包含其他元素。这意味着没有现成的闭合标签</input>可以使用。

您必须删除此闭合标签，并在 mat-form-field 标记内（仍处于其中）放置您的 <mat-icon> 标签:

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