Angular、Bootstrap与HTML表单验证：统一验证CSS类

本文将探讨如何在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) {}
}

代码解释：

立即学习“前端免费学习笔记（深入）”；

1.1.8PbootCMS

PbootCMS是一款高效、简洁、强悍的开源PHP企业网站开发建设管理系统。 PbootCMS 1.1.8 更新日志：2018-08-07 1.修复提交表单多选字段接收数据问题； 2.修复登录过程中二次登陆在页面不刷新时验证失败问题； 3.新增搜索结果fuzzy参数来控制是否模糊匹配； 4.新增父分类，顶级分类名称及链接独立标签，具体见手册； 5.新增内容多图拖动排序功能。

243

查看详情

• @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提供了对表单控件的访问。

使用方法：

1. 将上述代码保存为一个文件，例如 valid-invalid-class.directive.ts。
2. 在你的Angular模块中声明该指令。
3. 在需要应用Bootstrap验证样式的表单控件上添加 validInvalidClass 属性。

例如：

<input type="text" class="form-control" formControlName="username" validInvalidClass>

注意事项：

• 确保你的Angular项目已经安装了Bootstrap，并且正确引入了Bootstrap的CSS文件。
• 该指令依赖于 NgControl，因此只能用于Angular的表单控件。
• 如果需要更复杂的验证逻辑或自定义样式，可以修改指令中的代码。

总结

通过创建自定义指令，我们可以有效地统一Angular和Bootstrap的表单验证样式，从而简化代码，提高开发效率。该方法不仅可以应用于简单的表单验证，还可以扩展到更复杂的场景，例如自定义验证器和动态表单。记住，代码的可维护性和可读性同样重要，因此在实现功能的同时，也要注意代码的组织和注释。

以上就是Angular、Bootstrap与HTML表单验证：统一验证CSS类的详细内容，更多请关注php中文网其它相关文章！