Angular2入门系列（四）————ngModel和表单元素name属性

Angular2入门系列（四）————ngModel和表单元素name属性

经过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)">

   还有一点须要注意：

在表单中须要注意的事项

1.在ng2表单中使用ngModel须要注意,必须带有name属性或者使用 [ngModelOptions]=”{standalone: true}”，二选其一

<form #testform="ngform">
    <input name="username" [(ngModel)]=user.name />
</form> 

<form #testform="ngform">
    <input [ngModelOptions]="{standalone: true}" [(ngModel)]=user.name />
</form>

若是未设置name或者ngModelOptions，就会报以下错误：

If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions.

由于ngForm持有经过ngModel指令和name属性为各个元素建立的那些控件，而且监视它们的属性变化，包括有效性。 它还有本身的valid属性，只有当其中全部控件都有效时，它才有效。

2.使用button时须要注明type类型,未注明类型的button会默认为submit，当你点击一个非提交表单按钮时也会提交表单，因此要注明type=”button”