Typescript 如何在ANGLE中注册自定义验证器

你需要创建一个指令当你使用模板驱动的表单自定义验证器，这里是一个关于Stackblitz的工作例子，你可以通过它来实现你的功能，如果有任何疑问，请让我知道！

指令

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

@Directive({
  selector: '[notInSet]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: NotInSetDirective,
      multi: true,
    },
  ],
  standalone: true,
})
export class NotInSetDirective implements Validator {
  @Input() notInSet!: Map<string, number>;
  constructor() {}

  validate(control: AbstractControl): { [key: string]: any } | null {
    const val = control.value;
    if (this.notInSet.has(val)) return { InSet: true };
    else return null;
  }
}

双手

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import 'zone.js';
import { CommonModule } from '@angular/common';
import { NotInSetDirective } from './validator.指令';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, FormsModule, NotInSetDirective],
  template: `
    <form #myForm novalidate>
        <input pInputText [(ngModel)]="name" name="name" [notInSet]="existingNames" #theName="ngModel"/>
        <div *ngIf="!theName.valid" class="text-error">
            Please provide a unique name for this api
        </div>
        {{theName.valid | json}}
    </form>
  `,
})
export class App {
  name = 'Angular';
  existingNames = new Map([
    ['apples', 1],
    ['bananas', 1],
    ['oranges', 1],
  ]);
}

bootstrapApplication(App);

stackbitz