Angular 响应式表单根据其他两个输入验证输入

Question

我有三个输入字段，分别是

1. 最低分数
2. 最高分
3. 原产地

所以，origin at 值必须介于最低分和最高分之间。

我的表单是这样的

this.fb.group({
    min: ['', [Validators.required]],
    max: ['', [Validators.required]],
    origin: ['', [Validators.required, Validators.min(?), Validators.max(?)]] # I need value of min and max input field value here
})

如何正确验证原始输入字段？

编辑：

注意 - fb 是 FormBuilder

我的整个表格

this.scalesForm = this.fb.group({
  scales: this.fb.array([
    this.fb.group({
      type: ['x', [Validators.required]],
      name: ['', [Validators.required]],
      components: this.fb.array([], [Validators.required]),
      min: ['', [Validators.required]],
      max: ['', [Validators.required]],
      origin: ['', [Validators.required]]
    }),
    this.fb.group({
      type: ['y', [Validators.required]],
      name: ['', [Validators.required]],
      components: this.fb.array([], [Validators.required]),
      min: ['', [Validators.required]],
      max: ['', [Validators.required]],
      origin: ['', [Validators.required]]
    })
  ])
});

Answer 1

我将使用自定义验证器，在您的情况下类似于：

export function ValidateOrigin(control: AbstractControl): {[key: string]: boolean} | null {
  if (control.value < this.scalesForm.controls.scales[0].controls.min.value && control.value > this.scalesForm.controls.scales[0].controls.max.value) {
    return { invalidOrigin: true };
  } else {
    return null;
  }
}

// in the form declaration
this.fb.group({
  min: ['', [Validators.required]],
  max: ['', [Validators.required]],
  origin: ['', [Validators.required, ValidateOrigin]]
})

Answer 2

您必须创建一个自定义验证器。首先，您需要将表单控件创建为局部变量，以使它们的实例可用于您的依赖控件，如下所示：

const minFormControl = this.fb.control('', [Validators.required]);
const maxFormControl = this.fb.control('', [Validators.required]);

然后你可以创建你的组并使用这样的自定义验证器添加所有控件：

this.fb.group({
    min: minFormControl,
    max: maxFormControl,
    origin: this.fb.control('', [Validators.required, CustomValidators.validateMin(minFormControl), CustomValidators.validateMax(maxFormControl)])
})

然后在那些你可以实现你的验证逻辑。