Блог

Главная - Вопросы по программированию - Не отображается цвет ошибки проверки ошибки начальной загрузки (красный)

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

#angular #bootstrap-4

#angular #bootstrap-4

Вопрос:

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

Где я допустил ошибку?

 <form #loginForm="ngForm">
  <div class="form-group" [class.has-error]="userName.invalid amp;amp; 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 amp;amp; userName.touched">
      <p>Name is required</p>
    </span>
  </div>

  <div class="form-group" [class.has-error]="password.invalid amp;amp; 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 amp;amp; password.touched">
      <p>Password is required</p>
    </span>
  </div>
</form>

Комментарии:

1. Вы включили bootstrap.css?

2. да, я включил, если я не импортирую формы, также не отображаются

3. все работает, кроме цветов проверки ошибок

4. вы проверили, что в вашем dom отображается красный цвет?

5. и второе решение заключается в том, что вы можете добавить цвет, используя тег style в вашем HTML.

Ответ №1:

 <form #loginForm="ngForm"> <div class="form-group" [class.has-error]="userName.invalid amp;amp; 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 amp;amp; userName.touched"> <p>Name is required</p> </span> </div> <div class="form-group" [class.has-error]="password.invalid amp;amp; 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 amp;amp; password.touched"> <p>Password is required</p> </span> </div> </form>