3

我是角度和构建示例应用程序的新手。

我有一种情况，我从角度数据表中加载表单。加载时的表单具有基于数据库数据填充的属性。

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

我目前面临将自定义图标内联设置到 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 的示例图片

在此处输入图像描述

4

2 回答 2

4

添加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;
}
于 2019-02-10T13:36:48.930 回答
1

您想要实现的文本字段设计不符合文本字段的 Material Design 指南。

Angular Material 文档状态：

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

如果您既不想使用下划线、浮动标签也不想使用提示消息，我认为出于您的目的使用 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

于 2019-02-12T13:00:47.600 回答