Angular 2.4模板驱动表单中的自定义验证器

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

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    
    // 自定义验证规则
    if (value !== 'custom') {
      return { customError: true };
    }
    
    return null;
  };
}

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <div *ngIf="myForm.get('myControl').hasError('customError')">自定义验证错误</div>
    </form>
  `,
})
export class FormComponent {
  myForm = this.fb.group({
    myControl: ['', [Validators.required, customValidator()]]
  });

  constructor(private fb: FormBuilder) {}
}