Стиль ввода мата при ошибке (добавление значка мата в поле ввода при ошибке)

Я пытаюсь стилизовать поле ввода мата при ошибке, добавляя значок ошибки рядом со значком очистки поля, например:

Стиль ввода мата при ошибке (добавление значка мата в поле ввода при ошибке)

Я не могу найти способ добавить значок. Спасибо за вашу помощь заранее.

Мой HTML:

<button
    *ngIf = "value"
    matPrefix
    mat-icon-button
    aria-label = "Clear"
    (click) = "value = ''"
>
    highlight_off
    کلمه جدید 
<input
    class = "word-input"
    matInput
    type = "text"
    [(ngModel)] = "value"
    id = "word"
    #wordInput
    required
/>
    error
    کلمه ورودی قبلا وارد شده&zwnj;است

CSS:

::ng-deep .mat-error {
    text-align: right;
    font-size: 12px;
}

:host ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline- thick,
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-error {
    color: var(--error) !important;
}
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
117
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Посмотрите, как это делает загрузчик, в документации

затем вместо использования в качестве класса is_invalid вы можете использовать .ng-invalid.ng-touched

.ng-invalid.ng-touched {
    border-color: #dc3545;
    padding-left: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: leftcalc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

ПРИМЕЧАНИЕ. Я меняю право на лево в отступах и позиционирую изображение

ПРИМЕЧАНИЕ2: вы можете использовать любой svg, например.

background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' stroke='none' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");

Обновлять Если мы работаем с материалом angular, нам нужно учитывать «плавающую метку».

Итак, мы можем использовать в styles.css

input.ng-invalid.ng-touched {
  border-color: #dc3545;
  padding-left: calc(1.5em) !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' stroke='none' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
mat-form-field.mat-mdc-form-field.ng-invalid.ng-touched:not(.mat-focused) .mat-mdc-floating-label.mdc-floating-label:not(.mdc-floating-label--float-above) {
  transform: translate(1.5em,-.15rem);
}

Смотрите stackblitz

Спасибо за вашу помощь. проблема в том, что я использую поле формы мата и значки мата и так далее. и ng-invalid и ng-touched на них не работают

Tibi 28.12.2022 08:13

ng-invalid и ng-touched — это классы, добавляющие Angular. Я обновляю ответ. Если вы хотите использовать «значки», просто используйте *ngIf = "control.touched && control.invalid"

Eliseo 28.12.2022 09:55

большое спасибо, это сработало отлично с небольшим изменением стилей. еще раз спасибо

Tibi 01.01.2023 09:24

Другие вопросы по теме