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 ?

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

1 个答案: