【Angular2】模板语法之 ngModel

通过NgModel实现双向绑定

当开发一个数据录入表单的时候，我们常常希望既可以显示数据的属性值，当用户更改时，又可以更新数据的属性值。

1. NgModel指令可以帮我们实现这个需求：

<input [(ngModel)]="currentHero.firstName"> 

2. 如果我们更喜欢加前缀的格式的话，也可以这样写：

<input bindon-ngModel="currentHero.firstName"> 

3. 这个结构的背后还有一层含义，这层含义基于我们之前学到过的属性绑定和事件绑定技术。我们可以通过分别绑定input元素的value属性和input事件去实现和NgModel相同的效果：

<input [value]="currentHero.firstName" (input)="currentHero.firstName=$event.target.value"> 

4. 这种写法是非常繁琐的，我们不仅需要记住需要设置的元素属性，还要记住反映用户操作的事件。以及怎么提取当前输入框中的文本值，以便去更新数据属性。有人愿意每次都去做这些工作吗？NgModel指令隐藏了这些繁琐细节，它包装了元素的value属性，监听了input事件，并且在文本框发生改变时，触发该事件。

<input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event"> 

5. [(ngModel)]是否满足了我们所有的需求了呢? 是否存在这样的需求，需要我们使用它的扩展写法呢？NgModel仅仅可以设置目标属性。如果当用户改变输入值，我们需要做一起不同的事情，或者更多地事情呢？ 让我们尝试实现这样一个需求，将用户的输入强制转换成大写字母:

<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)"> 

可以看到，使用ngModel的扩展写法，可以实现更多地需求。