如何验证在一个表单控件中输入的一个值是否大于在 Angular 中另一个表单控件中输入的一个值？答案

【问题标题】：How do I validate one value entered in one form control is greater than one entered in another form control in Angular?如何验证在一个表单控件中输入的一个值是否大于在 Angular 中另一个表单控件中输入的一个值？
【发布时间】：2020-07-17 01:43:33
【问题描述】：

我有两个表单字段 minAmount 和 maxAmount 在 Angular 中的反应形式。我需要确保 maxAmount 大于 minAmount。我试过使用：

 this.form = this.formBuilder.group({
    minAmount: [undefined],
    maxAmount: [undefined, [Validators.min(this.form.get('minAmount').value)]]

  });

但这似乎不起作用。

【问题讨论】：

你能组织一个stackblitz吗？

标签： angular

【解决方案1】：

您需要在 formGroup 或 customValidator 上创建一个自定义验证器并检查这两个值。如果只检查 minAmount，当您更改最大值时，Angular 不会检查值。

如果您在 fromGroup 上创建自定义验证器，请考虑到 formGroup 的任何输入中的每次更改，“调用”验证器函数

  form = this.formBuilder.group({
    minAmount: [undefined,this.customValidator()],
    maxAmount: [undefined, this.customValidator()]
  }); 

  customValidator()
  {
    return (control:FormControl)=>
    {
      const form=control.parent
      if (form)
      {
        const min=form.get('minAmount');
        const max=form.get('maxAmount');
        return min.value && max.value && +max.value<+min.value?{error:'min malue'}:null
      }
    }
  }

 <div *ngIf="form.get('minAmount')?.errors.error 
          || form.get('maxAmount')?.errors.error">
      error
 </div>

或

  form = this.formBuilder.group({
    minAmount: [undefined],
    maxAmount: [undefined]
  },{validators:this.customValidatorGroup()}); 

  customValidatorGroup()
  {
    return (form:FormGroup)=>{
        const min=form.get('minAmount');
        const max=form.get('maxAmount');
        return min.value && max.value && +max.value<+min.value?{error:'min malue'}:null
    }
  }

  <div *ngIf="form.errors?.error">
        error group
  </div>

【讨论】：

【解决方案2】：

试试这样的

  this.form = this.fb.group({
    minAmount: [undefined, Validators.required],
    maxAmount: [undefined, Validators.required]
  }, { validator: findMaxamount }
  );

并创建您自己的验证器，例如

findMaxamount(form: FormGroup){
  const min = form.get('minAmount').value;
  const max = form.get('maxAMount').value;
  return max > min ? true : false;
}

【讨论】：