角4+：自定义验证器和本机min/max箭头选择
角4+：自定义验证器和本机min/max箭头选择
提问于 2018-10-17 13:48:29
我正在尝试添加一个动态min/max验证器指令，该指令将防止根据我的模板min和最大值使用向上/向下箭头手动键入错误的值、和。
当手动输入值时，它工作得很好，会显示错误。但我失去了防止使用输入的上下箭头键入错误数字的本机行为.
html示例：
<input name="ph" type="number" [(ngModel)]="plotData.soilCharacteristics.ph.value" ngFormMinMax [min]="defaultPlotParameters.soil.ph.min" [max]="defaultPlotParameters.soil.ph.max"/>指令代码：
@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;
}
}行为：
当最大值设置为10时，我可以手动输入11，错误将显示，，但我也可以通过使用输入的上/下箭头转到11。当删除指令时，上/下键会像预期的那样被阻塞到10，但是我失去了手动验证.
上/下键的默认行为似乎是过激的，有办法防止这种情况发生吗？我认为使用NG_VALIDATORSproviders是这样做的方式吗？
谢谢
回答 3
Stack Overflow用户
发布于 2018-10-17 17:21:42
我已经实现了使用窗体控件和自定义Validator的反应性表单进行验证。我们需要存储最后一个成功值，并且需要在UI中更新它。
https://stackblitz.com/edit/angular-homnk5?file=src%2Fapp%2Fapp.component.ts
在模板中，可以使用name.errors?.invalid显示错误消息。
Stack Overflow用户
发布于 2018-10-17 13:56:22
这是基于我在生产代码中得到的一些内容，但是您必须修改它：
@HostListener('keydown', ['$event'])
public keydown(event: any): void {
// Check for the value of the key pressed; if it is
// the up or down keys then trigger the validation manually.
this.form.updateValueAndValidity();
}这可能会帮助您找到特定于您的代码的解决方案。
Stack Overflow用户
发布于 2020-08-24 13:17:08
尝尝这个
[attr.min]="defaultPlotParameters.soil.ph.min"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52856503
复制相关文章
相似问题
腾讯云开发者
