Угловой компонент с настраиваемой проверкой

У меня есть компонент Angular 5, который в основном представляет собой просто метку и ввод

<div class = "form-group">
    <label for = "wwid">WWID</label>
    <input id = "wwid" required ...lots of attrs...>
</div>

Затем с помощью CSS я определил стиль:

.ng-invalid:not(form) {
  border-left: 5px solid #a94442; /* red */
}

Когда поле пустое, появляются две красные границы. Тот, который находится в поле ввода, который мне нужен, но также тот, который находится справа от ярлыка, который мне не нужен. Как избавиться от красной линии на этикетке?

Угловой компонент с настраиваемой проверкой

Вот фактический полный HTML-код, используемый компонентом.

<ng-template #listSelectionFormatter let-r = "result">
    <span>{{r.wwid}} - {{r.fullName}}</span>
</ng-template>

<div class = "form-group">
    <label *ngIf = "labelText" for = "wwid">
        {{ labelText }}
        <span *ngIf = "isRequired">&nbsp;<sup class = "requiredIndicator">*</sup></span>
    </label>

    <!-- inputFormatter is the format for what is placed into the input field after choosing from the dropdown -->
    <input id = "wwid" type = "text"
           class = "form-control"
           placeholder = "Search by WWID, IDSID, Name or Email"
           (selectItem) = "onWorkerSelected($event.item)"
           (input) = "onTextFieldChanged($event.target.value)"
           [ngModel] = "selectedWorker"
           [ngbTypeahead] = "search"
           [inputFormatter] = "selectedResultsFormatter"
           [resultTemplate] = "listSelectionFormatter"
           [disabled] = "disabled"
           [required] = "required"
    />
    <span *ngIf = "searching">searching&hellip;</span>
    <div class = "invalid-feedback" *ngIf = "searchFailed">Lookup failed.</div>
</div>

requiredIndicator предназначен только для более старого стиля, который я использовал, чтобы показать звездочку, если это необходимо, и использовал этот CSS:

.requiredIndicator {
  color: red;
  font-size: larger;
  vertical-align: baseline;
  position: relative;
  top: -0.1em;
}

Кажется, это не имеет значения.

Gargoyle 26.10.2018 00:13

Почему на скриншоте стоит метка Closed By, а на опубликованном коде - WWID? Между меткой и вводом ничего нет?

Jeto 26.10.2018 00:15

Я только что опубликовал минимальный пример HTML. Я обновлю вопрос, добавив полный HTML

Gargoyle 26.10.2018 00:21

Я тестировал его на "vanilla" angular (без начальной загрузки), и у меня нет никаких проблем. Не могли бы вы сделать StackBlitz? Или, что проще, сначала попробуйте проверить эту границу в своем браузере и посмотреть, откуда она идет. По какой-то причине в этой области должно быть что-то с классом ng-invalid.

Jeto 26.10.2018 00:34

Пробуем ... Полоска для подкомпонента не отображается. stackblitz.com/edit/angular-7zssyd

Gargoyle 26.10.2018 01:22

Думаю, вам не хватает атрибута ngModel на этом входе, имеющего отношение к selectedWorker.

Jeto 26.10.2018 01:26

Позвольте нам продолжить обсуждение в чате.

Gargoyle 26.10.2018 01:41
Приемы 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
7
55
0

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