我制作了一个有角度的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>
这是我以反应形式声明的方式:
'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
,但仍然相同。
我在堆栈上使用了answer中的这种模式/^\d+$/
,并且输入仍然接受特殊字符并验证了表单。
P.S。我在自定义验证器中添加了null
和undefined
条件,因为当我从此输入集中出来时,当它为空时,它抛出一个错误,表明它不能在空值上运行。 / p>
答案 0 :(得分: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() { }
}
别忘了添加您的最大长度验证器