У меня есть компонент 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"> <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…</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;
}
Почему на скриншоте стоит метка Closed By, а на опубликованном коде - WWID? Между меткой и вводом ничего нет?
Я только что опубликовал минимальный пример HTML. Я обновлю вопрос, добавив полный HTML
Я тестировал его на "vanilla" angular (без начальной загрузки), и у меня нет никаких проблем. Не могли бы вы сделать StackBlitz? Или, что проще, сначала попробуйте проверить эту границу в своем браузере и посмотреть, откуда она идет. По какой-то причине в этой области должно быть что-то с классом ng-invalid
.
Пробуем ... Полоска для подкомпонента не отображается. stackblitz.com/edit/angular-7zssyd
Думаю, вам не хватает атрибута ngModel
на этом входе, имеющего отношение к selectedWorker
.
Позвольте нам продолжить обсуждение в чате.
Кажется, это не имеет значения.