Angular2 ngModel

Question

我有一个输入字段，我想在每次击键后验证输入。最后，我想在输入字段外单击时验证它（不确定要使用哪个DOM事件）。问题是输入是＆＃34;滞后＆＃34;一个角色背后。

例如，如果用户输入＆＃34; a＆＃34;，则将其映射到的等号＆＃34;＆＃34;的ngModel变量。当他们输入＆＃34; ab＆＃34;时，变量等于＆＃34; a＆＃34;。

create-item.component.ts

的部分代码

export class CreateItem {
  public item: Item;

  constructor() {
    this.item = new Item();
  }

  onCheckItemInput() {
    // validate input on each keystroke
  }
}

create-item.component.html

的输入字段

<input class="form-control" type="text" required [(ngModel)]="item.name"
  #spy pattern=".{3,255}" (input)="onCheckItemInput()">

我做错了什么？

Answer 1

只要用户失去对输入元素的焦点，就会触发blur事件。

示例：用户在输入框外单击。

<input class="form-control" type="text" required [(ngModel)]="item.name"
#spy pattern=".{3,255}" (blur)="onCheckItemInput()">

我已经创建了一个简单的plunker来演示这个

https://plnkr.co/edit/4wnanssu08WPRziMkh9d?p=preview

Answer 2

要在键入时更改，您可以使用(keydown)。

<input class="form-control" type="text" required [(ngModel)]="item.name"
  #spy pattern=".{3,255}" (keydown)="onCheckItemInput()">

Answer 3

如果要在用户单击输入字段外部时验证输入，并使用（ngModelChange）事件（如果要验证每次击键），则可以使用（更改）事件。