在角度 4 中触发验证时，控件标签会突出显示

Posted 2023-02-22

【中文标题】在角度 4 中触发验证时，控件标签会突出显示

【英文标题】：control label getting highlighted when triggering validationin angular 4

【发布时间】：2018-05-15 06:22:09

【问题描述】：

我在我的 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>

【参考方案1】：

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

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

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

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

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