Bootstrap 4.1 формы проверки классов не работают в угловых 7

Question

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

вот код, который я пытаюсь

<div class="form-group" [ngClass]="{ 'has-error': (email.touched || email.dirty) && !email.valid}">
                  <input type="email" class="form-control" placeholder="Email" name="email" [(ngModel)]="model.email"
                  required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
                  <div *ngIf="(email.touched || email.dirty) && email.errors" class="help-block">
                      <span *ngIf="email.errors.required"  >Email required</span>
                      <span *ngIf="email.errors.pattern" >Invalid email</span>
                    </div>
                   </div>

Я пробовал 4.1 классы, но не мог их понять. Пожалуйста, помогите мне исправить это.

Answer 1

Чтобы показать поле ввода в форме с красной рамкой, чтобы показать, что это недопустимо, вы можете использовать просто один класс CSS. сначала в вашей главе css в вашем компоненте добавьте этот класс:

.form-control.ng-touched.ng-invalid{border:2px solid red;}

этот класс автоматически проверяет правильность введенных данных, и вы можете удалить ngClass. Теперь для проверки правильности и отображения сообщения об ошибке вам должно понравиться это:

  <div *ngIf= "email.touched && email.invalid" class="alert alert-danger">
                  <div *ngIf="email.errors.required">Email required</div>
                  <div *ngIf="email.errors.pattern" >Invalid email</div>
  </div>