Angular表单校验：如何在标签与输入框下方整行展示错误提示

.invalid-feedback始终保持display: none、没有自动切换为显示状态，根源是Bootstrap的样式规则对DOM层级有硬性绑定：

• 该类的基础样式默认是隐藏状态，只有当它的相邻兄弟元素带.is-invalid类、或者直接父容器带.is-invalid类时，才会被自动设置为display: block显示出来。
• 你把错误提示挪到独立的外层row容器后，这个容器内没有任何带.is-invalid类的元素，配套的CSS选择器完全匹配不到目标，所以错误提示一直藏着；只有输入框本身因为被加上了.is-invalid类，正常显示红色校验边框。

不需要硬凑Bootstrap要求的DOM层级，直接用内置工具类覆盖默认隐藏样式，灵活度最高，完全满足错误提示跨列占满整行的需求：

<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 mt-1">
    <div 
      *ngIf="submitted && f.firstName.errors" 
      class="invalid-feedback d-block w-100"
    >
      <div *ngIf="f.firstName.errors?.required">First Name is required</div>
    </div>
  </div>
</div>

这里加的.d-block类会强制将元素的display属性设为block，直接覆盖.invalid-feedback默认的display: none规则——不管错误提示放在页面哪个位置，只要*ngIf的判断条件满足，就会正常显示，搭配.w-100类还能自动占满整行宽度。

如果不想加样式覆盖类，可以调整DOM结构匹配Bootstrap的原有触发逻辑，不过适配成本会高一些：

• 把原本加在输入框上的.is-invalid类，移到包裹输入框的col-sm列容器上
• 把错误提示放在这个列容器内部，通过设置绝对定位、宽度为200%实现跨列整行展示

这种方式需要手动调整不同屏幕下的定位偏移，更适合错误提示只在当前输入列下方展示的场景，跨列排布的灵活度不如前者。

• 不要在同一个响应式表单中重复绑定相同的formControlName，Angular的表单控件名是全局唯一的，重复绑定会导致校验状态读取异常。
• 写错误判断条件时尽量加可选链语法（比如f.firstName.errors?.required），避免表单控件未初始化时抛出空值报错。

内容的提问来源于stack exchange，提问作者SK.