具有自定义验证的角度组件

Question

我有一个Angular 5组件，基本上只是一个标签和输入

local N = _N 
twoway scatter mpg price, note(Total no of observations: `N')

然后，我使用CSS定义了样式：

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

该字段为空白时，出现两个红色边框。我想要的输入字段上的一个，但我不想要的标签右边的一个。如何摆脱标签上的红线？

这是组件使用的实际完整HTML。

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

<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> 只是用于我用来显示星号（如果需要）的旧样式，并使用了以下CSS：

requiredIndicator