Question

我正在Angular6项目上工作，我在chrome上输入数字时输入了一个数字，但我没有在其中插入一个字母。相反，我可以在Firefox上写封信。验证工作，但仅阻止提交表单。表单使用模板验证。

我尝试使用模式和ngOnChange。

<form name="form" #f="ngForm" novalidate>
<!--other inputs-->
<input [(ngModel)]="myModel" type="number" required pattern="[0-9]*" 
 (ngModelChange)="validate($event)"/>
</form>

 validate(el){
 console.log(el);// print actual number or null.
}

我想停止无效的输入，而不像后来在chrome上那样在firefox中键入。目前验证有效，但只能在chrome上输入。

Answer 1

您可能需要执行以下操作：

<input [(ngModel)]="myModel" type="number" required pattern="[0-9]*" (ngModelChange)="validate($event)" (keydown)="checkIfNumberTyped($event)"/>

...结合了这样的匹配方法：

checkIfNumberTyped(event: KeyboardEvent): boolean {
    if (event.keyCode === 229 && event.key === 'Unidentified') {
      // This kind of keyboard filtering won't work for some Android devices.
      // Give up trying to filter, or an Android user might not be able to
      // type anything at all.
      return true;
    }
    else if (event.key.length > 1 || event.altKey || event.ctrlKey ||
             event.metaKey || ('0' <= event.key && event.key <= '9') {
      return true;
    }

    event.preventDefault();
    return false;
}

对不起，我不记得所有需要从头开始的确切逻辑。如果可以的话，我会稍后再更新，但希望现在可以为您指明正确的方向...

已更新：我找到了之前为这类事情编写的代码，并更新了答案。

Answer 2

我已经更改了这样的代码。

  validate(ev : KeyboardEvent) {
      if (ev.keyCode >= 48 && ev.keyCode <= 57 || // all digit
      (ev.key === "ArrowUp" || ev.key === "ArrowDown" )) {
        console.log("is digit "+ev.key);
      }
      else{
        console.log("is not a digit");
        ev.preventDefault(); // should stop event propagation.
ev.stopPropagation();
      }
  }```
but ev.preventDefault() not stop  input to be typed

Firefox验证不会阻止输入用户无效输入

2 个答案: