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>

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

1 个答案: