1. 创建一个自定义验证器。

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  const forbiddenNames = ['admin', 'user', 'guest'];

  if (forbiddenNames.includes(control.value?.toLowerCase())) {
    return { forbiddenName: true };
  }

  return null;
}

2. 在组件中注册自定义验证器。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { forbiddenNameValidator } from './validators/forbidden-name.validator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [Validators.required, forbiddenNameValidator]]
    });
  }
}

3. 在模板中显示验证错误信息。

  
    Name:
    
  

  

    Name is required.
  

  

    Name is not allowed.