Question

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

我遇到从角度数据表加载表格的情况。加载表单具有基于数据库中数据填充的属性。

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

我目前在将自定义图标内联设置为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;
}

Answer 2

您要实现的文本字段设计不符合Material Design guidelines for text fields。

Angular Material文档状态：

<mat-form-field>是用于包装多个Angular材质的组件组件并应用常见的文本字段样式，例如下划线，浮动标签和提示消息。

如果您既不想使用下划线，浮动标签也不想使用提示消息，那么我就不会出于目的使用Angular Material表单字段。

话虽如此，您当然可以覆盖现有的Angular Material样式，但请记住，您将来可能要调整布局，然后您将始终必须与现有的材质样式相对应，此外，这些材质样式可能将来会稍作更改，因此在升级到Angular Material的将来版本时，可能必须更改覆盖。

1。角材料

<div>
  <label class="inputLable">Lable:</label>
  <mat-form-field class="angularformcss no-line" floatLabel="never">
    <img matPrefix class="input-icon" src="https://image.flaticon.com/icons/svg/60/60778.svg" width="24px" height="24px">
    <input type="text" matInput placeholder="Text">
  </mat-form-field>
</div>

::ng-deep .no-line .mat-form-field-underline {
    display: none;
}

.angularformcss {
    font-size: 14px;
    text-align: left;
}

.angularformcss img {
  margin-bottom: -6px;
}

.inputLable {
  padding-right: 20px;
}

2。自定义

使用display: flex可以轻松地对齐标签，图像和文本字段。

<div class="input-wrapper">
  <label class="inputLable">Lable:</label>
  <img class ="input-icon" src="https://image.flaticon.com/icons/svg/60/60778.svg" width="24px" height="24px">
  <input class="plainInput mat-typography" type="text" placeholder="Text" /> 
</div>

.inputLable {
  padding-right: 20px;
}

.input-wrapper{
  display: flex;
  align-items: center;
}

.input-wrapper * {
  outline: none;
  background: inherit;
  border: none;
}

.input-icon {
  padding-right: 5px;
}

https://stackblitz.com/edit/angular-nbjcvw

在垫形区域控制之前设置图像图标

2 个答案:

1。角材料

2。自定义