如何将Bootstrap 5的.is-invalid类关联到Angular的ng-invalid？

Bootstrap 5用.is-invalid标记无效输入字段，但Angular响应式表单会自动给无效控件添加ng-invalid类，下面提供几种实用的解决方法：

方法一：用ngClass动态绑定类 #

直接在输入控件上通过ngClass根据表单状态添加.is-invalid，同时避免页面加载就显示错误样式（只有用户触碰过控件或提交过表单才触发）。

修改后的HTML代码：

<div class="mb-3">
  <label for="lastNameInput" class="form-label">姓氏</label>
  <input
    formControlName="lastName"
    type="text"
    class="form-control"
    id="lastNameInput"
    [ngClass]="{'is-invalid': membersForm.get('lastName')?.invalid && (membersForm.get('lastName')?.touched || membersForm.submitted)}"
  />
</div>

如果要复用判断逻辑，可在组件的TypeScript里写个方法：

isControlInvalid(controlName: string): boolean {
  const control = this.membersForm.get(controlName);
  return !!control?.invalid && (control.touched || this.membersForm.submitted);
}

然后HTML里简化成：

[ngClass]="{'is-invalid': isControlInvalid('lastName')}"

方法二：自定义指令自动处理 #

不想每个控件都手动加ngClass的话，写个自定义指令，自动监听控件状态，替换默认的ng-invalid为is-invalid。

创建bootstrap-validation.directive.ts文件：

import { Directive, HostBinding, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName], [formControl], [ngModel]'
})
export class BootstrapValidationDirective implements OnInit {
  constructor(private ngControl: NgControl) {}

  @HostBinding('class.is-invalid') get isInvalid(): boolean {
    const control = this.ngControl.control;
    return !!control?.invalid && (control.touched || control.dirty);
  }

  @HostBinding('class.ng-invalid') get removeNgInvalid(): boolean {
    return false; // 移除Angular默认的ng-invalid类
  }

  ngOnInit(): void {
    // 监听状态变化，触发类更新
    this.ngControl.control?.statusChanges.subscribe();
  }
}

然后在模块里声明这个指令：

import { BootstrapValidationDirective } from './bootstrap-validation.directive';

@NgModule({
  declarations: [
    // ...你的其他组件
    BootstrapValidationDirective
  ]
})
export class YourModule {}

之后所有带表单控件属性的元素都会自动应用Bootstrap的无效样式，不用逐个修改。

方法三：覆盖Angular默认样式 #

如果不想改组件代码，直接在全局样式文件（比如styles.scss）里把ng-invalid的样式改成和Bootstrap.is-invalid一致：

.ng-invalid.ng-touched,
.ng-invalid.ng-dirty {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.ng-invalid.ng-touched:focus,
.ng-invalid.ng-dirty:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

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