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

Question

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

我通过移动下面的 div 进行了尝试，但它不起作用。我看到的 cssinvalid-feedback仍然是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>'s 下方的其他表单错误也显示出来。

看看这个StackBlitz 演示。在此处查看完整页面。