Angular 中统一验证 CSS 类的最佳实践

本文旨在解决 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 的样式类。

实现步骤：

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

1. 创建自定义指令： 使用 Angular CLI 创建一个新的指令，例如 valid-invalid-class.directive.ts。

2. 引入必要的模块： 在指令中引入 Directive, HostBinding, Self 和 NgControl 模块。NgControl 用于访问表单控件的验证状态。

3. 定义指令选择器： 使用 selector 属性定义指令的选择器，例如 [validInvalidClass]。这意味着我们可以将该指令应用于任何具有 validInvalidClass 属性的 HTML 元素。

4. 使用 HostBinding 绑定类名： 使用 @HostBinding 装饰器将 Bootstrap 的 .is-valid 和 .is-invalid 类绑定到宿主元素的 class 属性。ngClassValid getter 方法返回表单控件的 valid 属性值，如果控件有效，则添加 .is-valid 类。ngClassInvalid getter 方法返回表单控件的 invalid 属性值，如果控件无效，则添加 .is-invalid 类。

   

   百度文心百中

   百度大模型语义搜索体验中心

   22

   查看详情

5. 注入 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) {}
}

使用方法：

1. 在模块中声明指令： 在你的 Angular 模块中声明 ValidInvalidClassDirective。

2. 在模板中使用指令： 将 validInvalidClass 属性添加到需要验证的表单控件中。例如：

   <input type="text" class="form-control" [formControl]="nameControl" validInvalidClass>

   登录后复制

注意事项：

• 确保你的项目中已经安装了 Bootstrap。
• 该指令适用于响应式表单和模板驱动表单。
• 如果需要自定义验证样式，可以在 CSS 中覆盖 .is-valid 和 .is-invalid 类的样式。
• 该指令依赖于 NgControl，因此只能应用于具有 formControl 或 ngModel 指令的元素。

总结：

通过创建自定义指令，我们可以轻松地将 Angular 的验证状态转换为 Bootstrap 的样式类，从而简化代码，实现验证样式的一致性。这种方法可以提高开发效率，并使代码更易于维护。 使用该方法可以减少模板中的冗余代码，使模板更加清晰易懂。

以上就是Angular 中统一验证 CSS 类的最佳实践的详细内容，更多请关注php中文网其它相关文章！