向Angular Reactive中的整个表单组添加自定义验证器

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

export function customValidator(control: AbstractControl): ValidationErrors | null {
  // 在这里编写你的验证逻辑
  // 如果验证通过，返回 null
  // 如果验证失败，返回一个包含错误信息的对象

  if (control.value === 'example') {
    return { customError: 'Invalid value' };
  }

  return null;
}

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { customValidator } from './custom-validator';

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myControl">
      <div *ngIf="myForm.get('myControl').errors?.customError">Invalid value</div>
    </form>
  `,
})
export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myControl: ['', [Validators.required, customValidator]],
    });
  }
}