Angular 8验证器，用于输入类型号

Question

我有一个带有类型号的输入，默认情况下允许插入一些字符，如"+"-">

HTML

<input   type="number"
class="form-control"
formControlName="numberChildren"/>

TypeScript

constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.createForm();
}
private createForm(): void {
this.personalForm= this.formBuilder.group({
numberChildren: [null, [Validators.required, Validators.pattern('[0-9]{2}')]],
})
}

我想实现一个只接受没有"+"-"的数字的逻辑

注意：必须使用数字作为输入类型

Answer 1

您可以注册到keypress事件以忽略您不想要的字符，如+字符。这也可能对用户更友好，因为没有显示错误消息，它只是阻止将字符添加到输入中。

<input type="number"
class="form-control"
(keypress)="($event.charCode === 8 || $event.charCode === 0 || $event.charCode === 13) ? null : $event.charCode >= 48 && $event.charCode <= 57"
formControlName="numberChildren"/>

charCode是所使用的ASCII字符。这将允许数字以及ENTER和BackSpace。