"Optional Field“Angular 2 Reactive表单的自定义验证器

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

// 自定义验证器函数
export function optionalFieldValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    
    // 如果值为空或undefined，则认为验证通过
    if (value === null || value === undefined || value === '') {
      return null;
    }
    
    // 如果值不为空，则进行其他验证逻辑
    // 这里可以根据具体需求进行验证规则的定义
    
    // 如果验证不通过，则返回一个包含错误信息的对象
    return { 'optionalFieldInvalid': true };
  };
}

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { optionalFieldValidator } from './optional-field.validator';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="optionalField">
      <div *ngIf="myForm.get('optionalField').errors?.optionalFieldInvalid">
        请输入有效的可选字段值。
      </div>
    </form>
  `
})
export class FormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      optionalField: ['', optionalFieldValidator()]
    });
  }
}