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

2024年4月23日 272次阅读 来源: 白狼巡抚

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”

    原文作者：白狼巡抚
    原文地址: https://segmentfault.com/a/1190000009298439
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞