Bootstrap 4.1表单验证类不在角度7中工作

Question

我的表单验证错误消息没有显示为红色而且没有突出显示输入字段，它显示为黑色。但是我在bootstrap版本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>