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

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

为img添加matPrefix指令，并更改一些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。

角度材质文档状态：

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

如果你既不想有下划线，浮动标签，也不想有提示消息，我看不出使用角度材料表单域有什么意义。

话虽如此，您当然可以覆盖现有的角度材质样式，但请记住，您可能希望在未来调整您的布局，然后您将始终必须针对现有的材质样式进行工作。另外，材质样式在未来可能会有一些变化，因此当您升级到角度材质的未来版本时，您可能不得不更改您的覆盖。

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