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

Я новичок в разработке угловых приложений.

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

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

В настоящее время у меня возникают проблемы с настройкой встроенного пользовательского значка в поле mat-form.

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

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

Пожалуйста, найдите изображение, указывающее на проблему.

Изображение ниже указывает на проблему, когда у меня есть элемент управления изображением вне поля mat-form.

<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

Источник

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;
}
Источник

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

В документе 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

Источник
Другие вопросы по тегам