Bootstrap 4 Bootstrap 4.1表单验证类在angular 7中不起作用

我的表单验证错误消息没有显示为红色，也没有突出显示输入字段，它显示为黑色。但我在引导版本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的课程，但我听不懂。

---

请帮助我解决这个问题。

为了以红色边框的形式显示输入字段以显示无效，您只需使用一个css类即可。在组件的css章节中，首先添加以下类：

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

该类自动检查输入字段的有效性，您可以删除该类。 现在，要检查验证并显示错误消息，您应该如下所示：

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

电子邮件要求
无效电子邮件