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

Question

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

我的表格在形式中。

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

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

任何帮助将不胜感激。

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

希望这有帮助