验证状态类（.has-error 等）是否已从 Bootstrap 5 中删除？答案

【问题标题】：Did the Validation State classes (.has-error, etc) got removed from Bootstrap 5?验证状态类（.has-error 等）是否已从 Bootstrap 5 中删除？
【发布时间】：2022-01-05 16:54:03
【问题描述】：

我想知道 bootstrap 5 是否删除了 验证状态类（.has-success、.has-warning 等），因为它突然不起作用，而且我似乎找不到这些类bootstrap.css 文件。

几个月前我仍然可以使用它并编写了一个简单的代码如下所示：

<div class="form-group row mb-3" [ngClass]="{ 'has-error': !addOperator.controls['code'].valid && addOperator.controls['code']?.touched }">
  <label for="code" class="col-sm-3 important col-form-label">
    Company Code
  </label>
  <div class="col-sm-9">
    <input formControlName="code" type="text" class="form-control" placeholder="Company Code" required="" maxlength="120" aria-required="true">
    <span *ngIf="!addOperator.controls['code'].valid && addOperator.controls['code']?.touched"
             class="help-block col-sm-offset-4">
        Field is required
    </span>
  </div>
</div>

到此：

<div class="form-group row mb-3" >
  <label for="code" class="col-sm-3 important col-form-label" 
         [ngClass]="{'text-danger': !addOperator.controls['code'].valid &&
           addOperator.controls['code']?.touched }">
    Company Code
  </label>
  <div class="col-sm-9">
    <input formControlName="name" type="text"
           [ngClass]="{ 'is-invalid': !addOperator.controls['code'].valid && 
             addOperator.controls['code']?.touched }" class="form-control" 
           placeholder="Company Code" required="" maxlength="120" aria-required="true">
    <span *ngIf="!addOperator.controls['code'].valid && addOperator.controls['code']?.touched"
          class="help-block col-sm-offset-4" [ngClass]="{ 'text-danger': !addOperator.controls['code'].valid && addOperator.controls['code']?.touched }">
      Field is required
    </span>
  </div>
</div>

当我必须更改大量表单和输入时，这不是很实用。

提前感谢，对于糟糕的格式，这是我第一次在这里询问。

【问题讨论】：

Angular 添加类 ng-valid, ng-invalid... 为你，见 docs。所以，我建议你最好不要使用 ngClass，只需在你的 styles.css 中添加类，例如.ng-invalid.ng-touched{border-color:red}。关于“错误”，您可以检查此SO 以创建自定义错误组件
如果我没记错的话，ng-valid 只适用于表单控件（输入），所以我仍然需要 ngClass 来作为 <label> 标签。但是感谢@Eliseo 提供的信息，这确实帮助我解决了其他问题
也适用于模板驱动的表单，但仅适用于“输入”（真正在 FormControl 中，如果您创建带有标签的自定义表单控件，则该类将应用于自定义表单控件）@987654323 @ where 标记为无效的 de 输入

标签： html css angular bootstrap-5

【解决方案1】：

验证类 .has-error, .has-warning, and .has-success 已在 v4 中删除。

来自migration guide：

将 .has-error、.has-warning 和 .has-success 类替换为 HTML5 通过 CSS 的 :invalid 和 :valid 伪类进行表单验证。

根据v5 docs，验证类的工作方式如下：

HTML 表单验证通过 CSS 的两个伪类 :invalid 和 :valid 应用。它适用于、元素。

Bootstrap 将 :invalid 和 :valid 样式限定为父 .was-validated 类，通常应用于 .was-validated 类。否则，任何没有值的必填字段在页面加载时显示为无效。这样，您可以选择何时激活它们（通常在尝试提交表单之后）。

o 重置表单的外观（例如，在使用 AJAX 进行动态表单提交的情况下），在提交后从再次删除 .was-validated 类。

作为后备，可以使用 .is-invalid 和 .is-valid 类代替伪类进行服务器端验证。它们不需要 .was-validated 父类。

Angular 会自动为各种表单控件添加 CSS 类 .ng-valid, .ng-invalid，您可以利用它们来自定义应用程序中的样式。你可以阅读更多关于不同表单控件状态类here

【讨论】：

非常感谢您的解释！很遗憾他们删除了它们，因为它确实简化了我的代码。

【解决方案2】：

有危险 -> 是无效的

已经成功 -> 是有效的

has-warning 已被删除。

【讨论】：