Angular 表单验证 - 在另一个 row/div 中显示错误

Question

当前错误消息显示在文本框的正下方。但是我想在标签和文本框下面的整行中显示它

我试过像下面那样移动 div，但它不起作用。我看到 invalid-feedback 的 css 仍然是 display: none。它应该更改为 display: block 或删除

<div class="form-group">
  <div class="row">
  <div class="col-sm">
    <label>First Name</label>
  </div>
  <div class="col-sm">
    <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
  </div>
  </div>
  <div class="row">
  <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
    <div *ngIf="f.firstName.errors.required">First Name is required</div>
  </div>
  </div>
</div>
<div class="form-group">
  <div class="row">
  <div class="col-sm">
    <label>First Name</label>
  </div>
  <div class="col-sm">
    <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
  </div>
  </div>
  <div class="row">
  <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
    <div *ngIf="f.firstName.errors.required">First Name is required</div>
  </div>
  </div>
</div>

如果我按上面的方式更改代码，我不会收到错误消息，但文本框的边框仍然是红色的。

预期：错误消息应该如下图所示显示

https://stackblitz.com/edit/angular-7-reactive-form-validation-jhuxvm

Answer 1

如果您希望表单验证错误也显示在每个标签下方。只需在每个表单标签下方添加错误容器 <div class="invalid-feedback"> 并为它们分别指定 display: block 样式，因为在显示 <input> 下方的其他表单错误之前它们不会显示还有。

看看这个StackBlitz Demo. View the full page here。

Angular 表单验证 - 在另一个 row/div 中显示错误

Angular form validation - display error in another row/div

html

css

angular

angular2-form-validation