在 angular 4 中触发验证时控制标签突出显示

Question

我正在 angular 4 验证中实施验证，需要做一些调整。验证工作正常，但可能需要更改消息的显示方式。当我单击窗体上的保存按钮时，控件下方会显示一条消息，控件边框和控件标签将以红色突出显示。我不希望控件标签以红色突出显示。我能想到的一种方法是使用常规标签，但我不能使用标签实现相同的效果。推荐（标签）吗？有什么好处。？我如何使用 (label for) 但不突出显示标签

<form [formGroup]="newMovieForm" (ngSubmit)="save(newMovieForm.value, newMovieForm.valid)">
  <div class="col-sm-12">
    <div class="form-group col-sm-6">
      <div class="form-group" [ngClass]="{'has-error':!newMovieForm.controls['title'].valid && (saveClicked || newMovieForm.controls['title'].touched)}">
        <label for="movie-title" class="control-label">Title of Movie</label>
        <input type="text" class="form-control" id="movie-title" placeholder="Title of Movie" formControlName="title" maxlength="100">
        <!-- The hasError method will tell us if a particular error exists -->
        <div *ngIf="newMovieForm.controls['title'].hasError('required') && (saveClicked || newMovieForm.controls['title'].touched)" class="alert alert-danger">Title is required.</div>
      </div>
    </div>
</form>

Answer 1

这与使用 for 属性无关。您的标签以红色突出显示的原因是因为它应用了 control-label class：

.has-error .control-label {
    color: #a94442;
}

您只需从标签中删除 class 即可获得您想要的结果。查看 source code，此 class 仅影响标签颜色，除非用于水平、内联或导航栏形式。

如果您仍想使用 control-label，您可以随时覆盖 CSS 以重置颜色，但在您的确切示例中这将是不必要的。

This 答案具体解释了 for 属性的用法，但正如我所说，这不会影响此处标签的突出显示。

在 angular 4 中触发验证时控制标签突出显示

control label getting highlighted when triggering validationin angular 4

angular

angular-reactive-forms