Angular 中如何自定义验证指令？

Question

在 Angular 中，自定义验证指令是一种有效的方法，可以创建符合特定业务需求的表单验证逻辑。你可以使用 Angular 的 Validator 接口和指令机制来实现自定义验证。以下是实现自定义验证指令的步骤：

1. 创建自定义验证指令

假设我们要创建一个验证器，用于检查表单输入是否包含特定的字符。首先，创建一个新的指令文件，例如 contains-character.directive.ts ：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appContainsCharacter]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ContainsCharacterDirective,
      multi: true,
    },
  ],
})
export class ContainsCharacterDirective implements Validator {
  @Input('appContainsCharacter') character: string = '';

  validate(control: AbstractControl): ValidationErrors | null {
    if (this.character && control.value && !control.value.includes(this.character)) {
      return { containsCharacter: { requiredCharacter: this.character } };
    }
    return null;
  }
}

2. 使用指令

在表单模板中使用此自定义指令时，可以像这样：

<form #myForm="ngForm">
  <div>
    <label for="username">Username:</label>
    <input
      id="username"
      name="username"
      ngModel
      appContainsCharacter="A"
      #username="ngModel"
      required
    />
    <div *ngIf="username.errors?.containsCharacter">
      The username must contain the character 'A'.
    </div>
  </div>
  <button [disabled]="myForm.invalid">Submit</button>
</form>

在这里，我们将指令 appContainsCharacter 添加到输入元素中，并传递要检查的字符（例如 'A' ）。当输入值不包含该字符时，验证器将返回一个错误对象 { containsCharacter: { requiredCharacter: 'A' } } ，从而显示相应的错误信息。

3. 验证原理

自定义验证器通过实现 Validator 接口，并重写 validate 方法来定义验证逻辑。验证器返回：

• null ：表示验证通过。
• 一个对象：表示验证失败，并包含具体的错误信息。

4. 在模块中声明指令

确保在模块文件（例如 app.module.ts ）中声明自定义指令，以便在应用程序中使用：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ContainsCharacterDirective } from './contains-character.directive';

@NgModule({
  declarations: [
    AppComponent,
    ContainsCharacterDirective,
  ],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

这样，你就可以在整个应用中使用你的自定义验证指令了。

小结

• 创建自定义指令 ：实现 Validator 接口，编写验证逻辑。
• 使用指令 ：在模板中应用指令并传入需要验证的参数。
• 错误处理 ：根据验证结果显示相应的错误消息。

这种方式使得你的自定义验证逻辑能够复用于多个表单组件中，并保持代码的整洁和可维护性。