本文旨在解决 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 属性添加到需要验证的表单控件中。例如：
注意事项：
确保你的项目中已经安装了 Bootstrap。该指令适用于响应式表单和模板驱动表单。如果需要自定义验证样式，可以在 CSS 中覆盖 .is-valid 和 .is-invalid 类的样式。该指令依赖于 NgControl，因此只能应用于具有 formControl 或 ngModel 指令的元素。
总结：
通过创建自定义指令，我们可以轻松地将 Angular 的验证状态转换为 Bootstrap 的样式类，从而简化代码，实现验证样式的一致性。这种方法可以提高开发效率，并使代码更易于维护。 使用该方法可以减少模板中的冗余代码，使模板更加清晰易懂。
以上就是Angular 中统一验证 CSS 类的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579350.html
微信扫一扫 
支付宝扫一扫 
