Angular 7: ng-invalid против :invalid

Я разрабатываю приложение Angular с целью его развертывания на мобильных устройствах и в веб-браузере. При стилизации формы для отображения недопустимых входных данных, должен ли я ориентироваться на класс Angular «ng-недействительный» или псевдокласс HTML5 «:недействителен» CSS?

css angular validation

02.02.2019 16:09

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

655

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы должны использовать псевдокласс :invalid! Например,

input[type = "date"]:invalid:not(.ng-pristine) {
    border: 5px solid red;
}

Другие полезные css-классы для проверки ввода

Вы можете проверить его поддержку на различных платформах здесь developer.mozilla.org/en-US/docs/Web/CSS/:invalid

— 02.02.2019 16:50

Если вы хотите, чтобы к мобильным устройствам применялись разные стили, вы можете использовать медиа-запросы в CSS developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/….

— 02.02.2019 16:51

@wentjun - любая подсказка, как разрешить мой запрос stackoverflow.com/questions/54515500/…

— 05.02.2019 17:23

02.02.2019 16:13