0

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

我的形式在形式之内。

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

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'
     }
   }
]

任何帮助将不胜感激。

4

1 回答 1

0

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

  

  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();
  }

希望这可以帮助

于 2020-07-01T11:48:11.457 回答