Angular2入门系列(四)ngModel和表单元素name属性

2017-05-05 09:38

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

通过NgModel实现双向绑定
当开发一个数据录入表单的时候,我们常常希望既可以显示数据的属性值,当用户更改时,又可以更新数据的属性值。

  • NgModel指令可以帮我们实现这个需求:

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

  • 如果我们更喜欢加前缀的格式的话,也可以这样写:

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

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

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

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

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

  • [(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”