Установите значок изображения до элемента управления mat-form-field

Question

Я новичок в Angular и создаю пример приложения.

У меня есть ситуация, когда я загружаю форму из таблицы угловых данных.Форма при загрузке имеет атрибуты, которые заполняются на основе данных из базы данных.

Для одного из полей формы, помимо отображения текста, я хотел бы поместить значок перед элементом управления, чтобы добавить визуальный индикатор за пределы текстового значения.Это не значок на значке углового материала, а пользовательское изображение.

В настоящее время у меня возникают проблемы с настройкой встроенного пользовательского значка в поле 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>

Когда я помещаю элемент управления изображением в поле формы мат, изображениеи значение поля находятся на разных строках.

<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

Дизайн текстового поля, которого вы хотите достичь, не соответствует Руководствам по проектированию материалов для текстовых полей .

Состояние документов Angular Material:

<mat-form-field> - это компонент, используемый для переноса нескольких компонентов углового материала и применения общих стилей текстового поля, таких как подчеркивание, плавающая метка и сообщения подсказок.

Если вы не хотите, чтобы подчеркивание было ни одним,плавающая метка или сообщения с подсказками Я не вижу смысла в использовании полей формы 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

Answer 2

Добавьте matPrefix директиву для img и измените некоторые css, чтобы получить ваш матовый ввод как вам нужно.

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