验证最小值不超过 Angular 应用程序中提供的最大值答案

【问题标题】：Validate that minimum value does not exceed the maximum value provided in an Angular app验证最小值不超过 Angular 应用程序中提供的最大值
【发布时间】：2020-07-01 10:03:30
【问题描述】：

我在角度应用程序中有两个输入字段，最小值和最大值。每当用户输入的最小值大于他/她提供的最大值（或最大默认值，如果他们没有提供值）时，我想显示一条错误消息。

我的表格在正式范围内。

我尝试创建一个自定义验证器来检查两个表单控件并返回一个带有错误消息的对象 - 但是，该解决方案似乎不起作用。

function minMaxValidator(c: FormControl) {
  const { min, max } = c.value;

   if (!min || !max) {
     return null;
   }

   if (max >= min) {
     return null;
   }

   return { minMaxValidator: { message: 'Minimum value cannot be more than the maximum value.'}}
}

然后在我的 formlyFieldConfig 中：

{
        validators: {
          validation: [
            { name: 'minMaxValidator', options: { errorPath: 'min'}}
          ]
        }
      },

我的字段如下：

[
   {
     key: 'min',
     type: 'input',
     templateOptions: {
       label: 'Minimum',
        input: 'number'
     }
   },
 {
     key: 'max',
     type: 'input',
     templateOptions: {
       label: 'Maximum',
       input: 'number'
     }
   }
]

我们将不胜感激。

【问题讨论】：

标签： javascript angular validation angular-formly ngx-formly

【解决方案1】：

我不确定您是如何创建表单控件的，但这是我解决类似问题的方法 // 我的表单在这里初始化

  

  this.form = new FormGroup({
      min: new FormControl(null, {validators: [this.validateMinMax()]}),
      max: new FormControl(null),
    });

   //my validation function here
    validateMinMax(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      if (this.form === undefined) {
        return null;
      }
      const max = this.form.get('min').value;
      if (control.value !== undefined && control.value >= max) {
          return { confirmPass: true };
      }
      return null;
    };
  }
}

您可以在 validateMinMax() 内部看到我返回的实际上是一个函数，而不是一个值。然后该函数返回错误或 null。

另一个提示。如果用户输入正确的最小值和最大值，则决定返回并将最大值更改为小于最小值的值。不会出错。

要解决这个问题，您可以在最大输入上添加一个值更改侦听器，该侦听器会触发如下所示的函数。这将迫使您的表单重新检查所有值并触发验证器

  updateValidation() {
    this.form.get('max').updateValueAndValidity();
    this.form.get('min').updateValueAndValidity();
  }

希望对你有帮助

【讨论】：