本文旨在解决 Angular 项目中，内置验证器、Angular 验证器和 Bootstrap 样式验证类不统一的问题。通过自定义指令，将 Angular 的 valid 属性转换为 Bootstrap 的 .is-valid 和 .is-invalid 类，从而简化代码，实现验证样式的一致性，提升开发效率和代码可维护性。
在 Angular 开发中，我们经常需要对表单进行验证，并根据验证结果应用不同的样式。Angular 提供了内置验证器和自定义验证器，Bootstrap 也提供了用于表单验证的样式类。然而，Angular 使用 :valid、:invalid、.ng-valid 和 .ng-invalid，而 Bootstrap 使用 .is-valid 和 .is-invalid。这导致我们需要编写额外的代码来统一这些验证样式，增加了开发负担。
为了解决这个问题，我们可以创建一个自定义指令，将 Angular 的验证状态转换为 Bootstrap 的样式类。
实现步骤：
立即学习“前端免费学习笔记（深入）”；
创建自定义指令： 使用 Angular CLI 创建一个新的指令，例如 valid-invalid-class.directive.ts。
引入必要的模块： 在指令中引入 Directive, HostBinding, Self 和 NgControl 模块。NgControl 用于访问表单控件的验证状态。
定义指令选择器： 使用 selector 属性定义指令的选择器，例如 [validInvalidClass]。这意味着我们可以将该指令应用于任何具有 validInvalidClass 属性的 HTML 元素。
使用 HostBinding 绑定类名： 使用 @HostBinding 装饰器将 Bootstrap 的 .is-valid 和 .is-invalid 类绑定到宿主元素的 class 属性。ngClassValid getter 方法返回表单控件的 valid 属性值，如果控件有效，则添加 .is-valid 类。ngClassInvalid getter 方法返回表单控件的 invalid 属性值，如果控件无效，则添加 .is-invalid 类。
注入 NgControl： 在指令的构造函数中，使用 @Self() 装饰器注入 NgControl。@Self() 确保我们只注入当前元素的 NgControl 实例。
代码示例：
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) {}
}使用方法：
在模块中声明指令： 在你的 Angular 模块中声明 ValidInvalidClassDirective。
-
在模板中使用指令： 将 validInvalidClass 属性添加到需要验证的表单控件中。例如：
<input type="text" class="form-control" [formControl]="nameControl" validInvalidClass>
注意事项：
- 确保你的项目中已经安装了 Bootstrap。
- 该指令适用于响应式表单和模板驱动表单。
- 如果需要自定义验证样式，可以在 CSS 中覆盖 .is-valid 和 .is-invalid 类的样式。
- 该指令依赖于 NgControl，因此只能应用于具有 formControl 或 ngModel 指令的元素。
总结：
通过创建自定义指令，我们可以轻松地将 Angular 的验证状态转换为 Bootstrap 的样式类，从而简化代码，实现验证样式的一致性。这种方法可以提高开发效率，并使代码更易于维护。 使用该方法可以减少模板中的冗余代码，使模板更加清晰易懂。
