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。