Угловой компонент с пользовательской проверкой - PullRequest
Новая
       7

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

0 голосов
/ 26 октября 2018

У меня есть компонент 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 */
}

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

enter image description here

Вот фактический полный 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;
}
...