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>

Bootstrap错误验证错误颜色（红色）未显示

1 个答案: