角度表单验证 - 在另一行/div 中显示错误

问题描述

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

我通过像下面这样移动 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

解决方法

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

看看这个StackBlitz Demo。查看完整页面 here。