angular4：自定义验证器和本机最小/最大箭头选择

Angular 4+: Custom validator AND native min/max arrow selection

我正在尝试添加动态的最小/最大验证器指令，以防止基于模板的[min]和[max]值手动输入错误值以及使用向上/向下箭头。

当手动输入值时，它可以完美工作，并显示错误。但是我失去了本能防止使用输入的向上/向下箭头键入错误数字的行为...

html示例：

1	<input name="ph" type="number" [(ngModel)]="plotData.soilCharacteristics.ph.value" ngFormMinMax [min]="defaultPlotParameters.soil.ph.min" [max]="defaultPlotParameters.soil.ph.max"/>

指令代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

@Directive({
selector: '[ngFormMinMax]',
providers: [{ provide: NG_VALIDATORS, useExisting: WfNgMinMaxDirective, multi: true }]
})
export class WfNgMinMaxDirective implements Validator {
@Input()
ngModel: NgModel;

_min: number;
@Input()
set min(value: number) {
this._min = value;
}

_max: number;
@Input()
set max(value: number) {
this._max = value;
}

validate(control: AbstractControl): ValidationErrors | null {
if (control.value > this._max) {
return { max: { invalid: true } };
}

if (control.value < this._min) {
return { min: { invalid: true } };
}
return null;
}
}

行为：

将[max]值设置为10，我可以手动输入11并显示错误，但是我也可以使用输入的向上/向下箭头转到11。删除指令时，向上/向下键被锁定为10，如预期的那样，但是我丢失了手动验证...

似乎向上/向下键的默认行为已被覆盖，有没有办法防止这种情况？我以为使用NG_VALIDATORSproviders是做到这一点的方法？

谢谢

我已使用带有窗体控制和自定义验证程序的反应性窗体实现了验证。我们需要存储最后一个成功值，并且需要在UI中对其进行更新。

https://stackblitz.com/edit/angular-homnk5?file=src/app/app.component.ts

在模板中，您可以使用name.errors？.invalid

显示错误消息。

试试这个

1	[attr.min]="defaultPlotParameters.soil.ph.min"