Angular 7动态FormArray中自定义校验器比较Min/Max Length值

我帮你搞定这个跨FormArray元素的字段校验问题！核心问题在于你的Min Length和Max Length属于FormArray里的两个不同FormGroup，单个组的校验器没法拿到另一个组的值，所以咱们要在整个FormArray层面添加自定义校验器，这样就能同时获取两个字段的值做对比了。

步骤1：编写跨数组元素的自定义校验器 #

创建一个校验器函数，它会接收整个validations FormArray，找到对应的Min Length和Max Length控件，然后对比它们的值：

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

// 自定义校验器：检查Min Length是否大于Max Length
export function minMaxLengthValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const validationsArray = control as FormArray;
    if (!validationsArray || validationsArray.length === 0) return null;

    // 找到type为minLength和maxLength的表单组，取出它们的value控件
    const minLengthGroup = validationsArray.controls.find(
      group => group.get('type')?.value === 'minLength'
    );
    const maxLengthGroup = validationsArray.controls.find(
      group => group.get('type')?.value === 'maxLength'
    );

    if (!minLengthGroup || !maxLengthGroup) return null;

    const minValueControl = minLengthGroup.get('value');
    const maxValueControl = maxLengthGroup.get('value');
    const minValue = parseInt(minValueControl?.value || '', 10);
    const maxValue = parseInt(maxValueControl?.value || '', 10);

    // 校验逻辑：两个值都是有效数字，且Min > Max时触发错误
    if (!isNaN(minValue) && !isNaN(maxValue) && minValue > maxValue) {
      // 给两个控件都标记错误（保留原有错误）
      minValueControl?.setErrors({ ...minValueControl?.errors, minGreaterThanMax: true });
      maxValueControl?.setErrors({ ...maxValueControl?.errors, minGreaterThanMax: true });
      return { minGreaterThanMax: true };
    } else {
      // 清除错误（注意保留其他可能的错误，比如数字格式错误）
      if (minValueControl?.hasError('minGreaterThanMax')) {
        const errors = { ...minValueControl.errors };
        delete errors.minGreaterThanMax;
        minValueControl.setErrors(Object.keys(errors).length ? errors : null);
      }
      if (maxValueControl?.hasError('minGreaterThanMax')) {
        const errors = { ...maxValueControl.errors };
        delete errors.minGreaterThanMax;
        maxValueControl.setErrors(Object.keys(errors).length ? errors : null);
      }
      return null;
    }
  };
}

步骤2：给FormArray绑定校验器 #

在创建additionalForm的时候，把这个校验器加到validations FormArray上，同时给Min/Max的value控件添加数字格式校验，确保输入的是有效数字：

import { FormBuilder, FormArray, Validators } from '@angular/forms';

// ... 组件类内部代码
constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  this.additionalForm = this.fb.group({
    validations: this.fb.array(
      // 遍历validtionsField生成对应的FormGroup
      this.validtionsField.map(field => this.createValidationGroup(field)),
      { validators: minMaxLengthValidator() } // 绑定自定义校验器
    )
  });
}

// 创建单个校验项的FormGroup
private createValidationGroup(field: any): FormGroup {
  const validators = [];
  // 给Min/Max的value添加数字格式校验
  if (field.type === 'minLength' || field.type === 'maxLength') {
    validators.push(Validators.pattern(/^\d+$/));
  }
  return this.fb.group({
    type: [field.type, Validators.required],
    value: ['', validators]
  });
}

步骤3：在HTML中显示错误提示 #

修改你的模板，给输入框添加错误提示，当触发minGreaterThanMax错误时显示对应的提示：

<div [formGroup]="additionalForm">
  <div formArrayName="validations">
    <div *ngFor="let validation of additionalForm.get('validations')!.controls; let i = index" 
         [formGroupName]="i"
         class="validation-item">
      <mat-form-field appearance="fill">
        <mat-label>{{ validation.get('type')?.value }}</mat-label>
        <input matInput formControlName="value">
        <!-- 显示数字格式错误 -->
        <mat-error *ngIf="validation.get('value')?.hasError('pattern')">
          请输入有效的正整数
        </mat-error>
        <!-- 显示Min大于Max的错误 -->
        <mat-error *ngIf="validation.get('value')?.hasError('minGreaterThanMax')">
          最小长度不能大于最大长度
        </mat-error>
      </mat-form-field>
    </div>
  </div>
</div>

关键说明 #

• 校验器放在FormArray层面，才能访问到数组里的所有FormGroup，找到Min和Max对应的控件
• 处理错误时要保留其他可能的校验错误（比如数字格式），不能直接覆盖errors对象
• 当用户修改Min或Max的值时，Angular会自动触发FormArray的校验器，不需要手动触发

内容的提问来源于stack exchange，提问作者vinuta