引导错误验证错误颜色（红色）未显示答案

【问题标题】：Bootstrap error validation error color (red) not showing引导错误验证错误颜色（红色）未显示
【发布时间】：2020-08-24 06:34:08
【问题描述】：

我正在尝试使用 Bootstrap 验证表单。到目前为止，我设法验证了表单，但是当出现错误时，我的表单应该将颜色更改为红色。但没有显示红色。

我在哪里做错了？

<form #loginForm="ngForm">
  <div class="form-group" [class.has-error]="userName.invalid && userName.touched" [class.has-success]="userName.valid">
    <label for="userName" class="control-label">Username</label>
    <input type="text" class="form-control" name="userName"
      [(ngModel)]="loginObject.userName" id="userName" #userName="ngModel" required>
    <span class="help-block" *ngIf="userName.invalid && userName.touched">
      <p>Name is required</p>
    </span>
  </div>

  <div class="form-group" [class.has-error]="password.invalid && password.touched" [class.has-success]="password.valid">
    <label for="password" class="control-label">Password</label>
    <input type="password" class="form-control" name="password" 
      [(ngModel)]="loginObject.password" id="password" #password="ngModel" required>
    <span class="help-block" *ngIf="password.invalid && password.touched">
      <p>Password is required</p>
    </span>
  </div>
</form>

【问题讨论】：

是否包含 bootstrap.css ？
是的，如果我不导入表格，我也包括在内
除错误验证颜色外一切正常
你检查过显示红色的 dom 吗？
第二种解决方案是您可以在 HTML 中使用样式标签添加颜色。

标签： angular bootstrap-4

【解决方案1】：

<form #loginForm="ngForm"> <div class="form-group" [class.has-error]="userName.invalid && userName.touched" [class.has-success]="userName.valid"> <label for="userName" class="control-label">Username</label> <input type="text" class="form-control" name="userName" [(ngModel)]="loginObject.userName" id="userName" #userName="ngModel" required> <span class="help-block" style="color:red" *ngIf="userName.invalid && userName.touched"> <p>Name is required</p> </span> </div> <div class="form-group" [class.has-error]="password.invalid && password.touched" [class.has-success]="password.valid"> <label for="password" class="control-label">Password</label> <input type="password" class="form-control" name="password" [(ngModel)]="loginObject.password" id="password" #password="ngModel" required> <span class="help-block" style="color:red" *ngIf="password.invalid && password.touched"> <p>Password is required</p> </span> </div> </form>

【讨论】：