Angular 6自定义验证器如何禁止用户在数字输入中添加+或-等特殊字符

Question

我制作了一个有角度的6个自定义验证器来检查用户是否输入了3个必需的数字。这是我的输入：

<mat-form-field appearance="outline" color="warn">
<mat-label>Last 3 digits</mat-label>
<input matInput type="text" formControlName="last_three_digits" placeholder="Last 3 digits">
</mat-form-field>&nbsp;

以下是我如何以反应形式声明它：

'last_three_digits': new FormControl('', [Validators.required, validatePositiveNotNull, validateLengthThree])

我尝试添加Validators.pattern("[0-9 ]*")，但它一直允许用户添加-或+或=或/。

我只需要严格要求长度为3的数字。

这是脚本：

export function validateLengthThree(control: AbstractControl)
{
if(control.value==null || control.value==undefined)
{
return { validPositive: true}
}
else if(control.value.length<3 && control.value!=null && control.value!=undefined)
{
return { validPositive: true}
}
else if(control.value.length>3)
{
return { validPositive: true}
}
return null;
}

我尝试将输入类型更改为number，但仍然是一样的。

我在堆栈上使用了这个答案中的/^d+$/模式，输入仍然接受特殊字符并验证表单

第页。S.我在自定义验证器中添加了null和undefined条件，因为当我从这个输入集中注意力时，当它为空时，它会抛出一个错误，说它不能在null值上运行。

Answer 1

在输入上使用指令，以防止按下键

107="+">

109="-">

111="/">

187="=">

<input keysban="[107,109,111,187]" type="text">

指令

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[editable]'
})
export class EditableDirective {
@Input() keysban: number[];
@HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
// check banned key
if (this.keysban) {
if (this.keysban.indexOf(event.keyCode) > -1) {
event.preventDefault();
}
}
console.log(event.keyCode);
}
constructor() { }
}

不要忘记添加您的最大长度验证器