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

Question

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

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

Max validator value using the value of another control within a form array

angular-validation

angular

angular-reactive-forms