Цвет ошибки проверки ошибки начальной загрузки (красный) не отображается

Question

Я пытаюсь проверить форму с помощью начальной загрузки.До сих пор мне удалось проверить форму, но моя форма должна изменить цвет на красный при возникновении ошибки.Но красный цвет не отображается.

Может кто-нибудь помочь мне, пожалуйста, где я ошибся?

<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>

Answer 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>