Question

我正在试图弄清楚如何在每次按键时验证输入字段。如果输入字段中的文本被某些验证函数视为无效，我想取消按键或只是恢复原始值。这样，输入字段应始终包含有效值。

所以输入字段如下所示：

<input [ngModel]="textValue" (ngModelChange)="onModelChange($event)" />

在我的组件中，我声明了一个textValue属性和一个处理onModelChange的函数：

onModelChange(newText: string) {
        if (checkText(newText)) {
            //input is valid, so update the model
            this.textValue = newText;
        }
        else {
            //cancel the keypress or restore the original value
            //HOW TO ACHIEVE THIS?
        }
    }

在尝试了很多数据绑定和处理按键事件的组合后，我决定问专家。提前谢谢！

修改我自己找到了解决方案。我没有处理ngModelChange，而是订阅了输入事件，并使用event.target.value来获取/设置每个按键上的相应值。我的输入字段现在看起来像这样：

 <input [value]="textValue" (input)="onInput($event)" />

这里有相应的onInput函数：

    onInput(event) {
            let newText: string = event.target.value;
            if (checkText(newText)) {
                //input is valid, so update the model
                this.textValue = newText;
            }
            else {
                //restore the original value
                event.target.value = this.textValue;
            }
        }

我希望任何人都面临同样的问题！

Answer 1

您的解决方案还可以，但我也可以找到替代方法

<input ... (keypress)="validateKey($event)" >

您可以使用keypress和验证功能来代替keydown，

validateKey(event) {
  let oldval = event.target.value;
  let val = oldval.slice(0,event.target.selectionStart) + event.key + oldval.slice(event.target.selectionEnd);

  // here you have access to input oldval and (current) val

  if(val .... ) return true // allow to push charater
  return false              // not allow to push character
}

在Angular 2中按下按键验证输入字段

1 个答案: