本文将探讨如何在Angular项目中，统一使用Bootstrap的验证样式，避免因Angular自带验证和Bootstrap验证使用不同的CSS类而导致的代码冗余。正如摘要所述，我们将创建一个自定义指令，将Angular的验证状态转换为Bootstrap的验证样式，从而简化开发流程。
自定义指令实现验证样式统一
Angular的响应式表单在验证数据时，会使用:valid和:invalid伪类，以及.ng-valid和.ng-invalid类。而Bootstrap则使用.is-valid和.is-invalid类以及:valid和:invalid伪类。为了避免在每个表单控件上都使用[ngClass]来手动映射这些类，我们可以创建一个自定义指令，自动将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) {}
}代码解释：
立即学习“前端免费学习笔记（深入）”；
- @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 属性。
例如：
<input type="text" class="form-control" formControlName="username" validInvalidClass>
注意事项：
- 确保你的Angular项目已经安装了Bootstrap，并且正确引入了Bootstrap的CSS文件。
- 该指令依赖于 NgControl，因此只能用于Angular的表单控件。
- 如果需要更复杂的验证逻辑或自定义样式，可以修改指令中的代码。
总结
通过创建自定义指令，我们可以有效地统一Angular和Bootstrap的表单验证样式，从而简化代码，提高开发效率。该方法不仅可以应用于简单的表单验证，还可以扩展到更复杂的场景，例如自定义验证器和动态表单。记住，代码的可维护性和可读性同样重要，因此在实现功能的同时，也要注意代码的组织和注释。
