Я пытаюсь стилизовать поле ввода мата при ошибке, добавляя значок ошибки рядом со значком очистки поля, например:
Я не могу найти способ добавить значок. Спасибо за вашу помощь заранее.
Мой 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
کلمه ورودی قبلا وارد شده‌است
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;
}
Посмотрите, как это делает загрузчик, в документации
затем вместо использования в качестве класса 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 — это классы, добавляющие Angular. Я обновляю ответ. Если вы хотите использовать «значки», просто используйте *ngIf = "control.touched && control.invalid"
большое спасибо, это сработало отлично с небольшим изменением стилей. еще раз спасибо
Спасибо за вашу помощь. проблема в том, что я использую поле формы мата и значки мата и так далее. и ng-invalid и ng-touched на них не работают