angular - 使用表单数组中另一个控件的值的最大验证器值

Question

我希望下面的代码能够很好地解释我的需求。我需要在计数字段上使用最大数量验证器来检查另一个容量字段的值。我遇到的一个问题是这两个字段都在表单组的表单数组内，因此会有许多计数/容量组合的实例。任何帮助将不胜感激。使用 Angular 7。

setForm() {
  this.form = this.fb.group({
    types: this.fb.array([])
  });
  this.typesArray = this.form.get('types') as FormArray;
}

addType() {
  this.typesArray.push(this.setType(0,0));
}

setType(countValue, capacityValue): FormGroup {
  return this.fb.group({
    count: [{value: countValue}, [
      Validators.pattern(/^[0-9]*$/i ),
      Validators.max(WHAT PUT HERE FOR ALWAYS CHECKING VALUE OF CAPACITY??)
    ]],
    capacity: [{value: capacityValue}, Validators.pattern(/^[0-9]*$/i )],
  });
}

如果在编辑任一字段时计数字段大于容量字段，我希望在 UI 中显示验证消息。这只是两者的每个实例之间的连接。

Answer 1

当您尝试基于另一个表单控件验证表单控件时，最好的情况是创建自定义表单组验证器

自定义验证器

export function maxValueValidator(fb: FormGroup): ValidationErrors | null {
  const count = +fb.get('count').value || 0;
  const capacity = +fb.get('capacity').value;

  if (capacity > count) {
    return {
      maxValue:
      {
        count,
        capacity
      }
    }
  } else {
    null
  }

}

将验证器添加到 formGroup

this.form = fb.group({
  count: null,
  capacity: [null,]
}, {  // 👈 after we have finished set the controls we add formGroup validators
    validators: [maxValueValidator] 
  });

}

stackblitz demo 🚀