javascript - 用于输入类型编号的 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 character用过的。这将允许输入数字以及 ENTER 和 BackSpace。