本文将探讨如何在Angular项目中，统一使用Bootstrap的验证样式，避免因Angular自带验证和Bootstrap验证使用不同的CSS类而导致的代码冗余。正如摘要所述，我们将创建一个自定义指令，将Angular的验证状态转换为Bootstrap的验证样式，从而简化开发流程。
自定义指令实现验证样式统一
Angular的响应式表单在验证数据时，会使用:valid和:invalid伪类，以及.ng-valid和.ng-invalid类。而Bootstrap则使用.is-valid和.is-invalid类以及:valid和:invalid伪类。为了避免在每个表单控件上都使用[ngClass]来手动映射这些类，我们可以创建一个自定义指令，自动将Angular的验证状态转换为Bootstrap的验证样式。
以下是实现该功能的指令代码：
代码解释：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
@Directive({ selector: '[validInvalidClass]' }): 定义了一个名为validInvalidClass的指令。selector指定了该指令可以被应用到哪个元素上，这里使用
属性选择器
[validInvalidClass]，意味着可以将该指令添加到任何具有validInvalidClass属性的元素上。
@HostBinding('class.is-valid'): @HostBinding装饰器允许我们将指令类的属性绑定到宿主元素的属性上。这里我们将ngClassValid属性绑定到宿主元素的class.is-valid属性上。
get ngClassValid(): boolean { return this.control?.valid ?? false; }: 这是一个getter方法，它返回一个布尔值，表示控件是否有效。this.control?.valid使用了可选链操作符，如果this.control为null或undefined，则直接返回undefined，否则返回this.control.valid的值。?? false使用了空值合并运算符，如果this.control?.valid返回null或undefined，则返回false。
@HostBinding('class.is-invalid'): 与@HostBinding('class.is-valid')类似，这里我们将ngClassInvalid属性绑定到宿主元素的class.is-invalid属性上。
get ngClassInvalid(): boolean { return this.control?.invalid ?? false; }: 这是一个getter方法，它返回一个布尔值，表示控件是否无效。
public constructor(@Self() private control: NgControl) {}: 这是指令的构造函数，它接收一个NgControl类型的参数。@Self()装饰器表示我们只想在当前元素上查找NgControl的实例，而不是在父元素中查找。NgControl提供了对表单控件的访问。
使用方法：
将上述代码保存为一个文件，例如 valid-invalid-class.directive.ts。
在你的Angular模块中声明该指令。
在需要应用Bootstrap验证样式的表单控件上添加 validInvalidClass 属性。
例如：
注意事项：
确保你的Angular项目已经安装了Bootstrap，并且正确引入了Bootstrap的CSS文件。
该指令依赖于 NgControl，因此只能用于Angular的表单控件。
如果需要更复杂的验证逻辑或自定义样式，可以修改指令中的代码。
总结
通过创建自定义指令，我们可以有效地统一Angular和Bootstrap的表单验证样式，从而简化代码，提高开发效率。该方法不仅可以应用于简单的表单验证，还可以扩展到更复杂的场景，例如自定义验证器和动态表单。记住，代码的可维护性和可读性同样重要，因此在实现功能的同时，也要注意代码的组织和注释。
import { Directive, HostBinding, Self } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[validInvalidClass]'
})
export class ValidInvalidClassDirective {
@HostBinding('class.is-valid')
get ngClassValid(): boolean {
return this.control?.valid ?? false;
}
@HostBinding('class.is-invalid')
get ngClassInvalid(): boolean {
return this.control?.invalid ?? false;
}
public constructor(@Self() private control: NgControl) {}
}