角反应形式基于其他两个输入来验证输入

Question

我有三个输入字段，即

1. 最低分数
2. 最高分
3. 起源

因此，logger.Audit("message.....") -> logs to DB logger.Log("message.....") -> calls the default implementation logger.Trace("message....") -> logs to file, or something 的值必须介于最低分数和最高分数之间。

我的表单如下

auditLogger.Log("message.....") -> logs to DB
defaultLogger.Log("message.....") -> calls the default implementation
traceLogger.Log("message....") -> logs to file, or something

如何正确验证来源输入字段？

编辑：

注意-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

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

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

    <div class="row text-center py-4 align-content-between flex-wrap">
        <div class="col-lg-4 d-flex justify-content-center align-items-center">
            <p class="text-secondary mb-0">Copyright &copy; Saud</p>
        </div>
        <div class="col-lg-4">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal"> Contact Us </button>
        </div>
        <div class="col-lg-4 d-flex justify-content-center align-items-center">
            <ul class="list-inline quicklinks mb-0">
                <li class="list-inline-item">
                    <a href="#">Privacy Policy</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">Terms of Use</a>
                </li>
            </ul>
        </div>
    </div>

然后，您可以使用以下自定义验证器创建组并在其中添加所有控件：

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

然后在其中可以实现验证逻辑。