摘要：入门系列四和表单元素属性通过实现双向绑定当开发一个数据录入表单的时候，我们常常希望既可以显示数据的属性值，当用户更改时，又可以更新数据的属性值。以及怎么提取当前输入框中的文本值，以便去更新数据属性。
Angular2入门系列（四）————ngModel和表单元素name属性
通过NgModel实现双向绑定
当开发一个数据录入表单的时候，我们常常希望既可以显示数据的属性值，当用户更改时，又可以更新数据的属性值。
NgModel指令可以帮我们实现这个需求：
如果我们更喜欢加前缀的格式的话，也可以这样写：
这个结构的背后还有一层含义，这层含义基于我们之前学到过的属性绑定和事件绑定技术。我们可以通过分别绑定input元素的value属性和input事件去实现和NgModel相同的效果：
这种写法是非常繁琐的，我们不仅需要记住需要设置的元素属性，还要记住反映用户操作的事件。以及怎么提取当前输入框中的文本值，以便去更新数据属性。有人愿意每次都去做这些工作吗？NgModel指令隐藏了这些繁琐细节，它包装了元素的value属性，监听了input事件，并且在文本框发生改变时，触发该事件。
[(ngModel)]是否满足了我们所有的需求了呢? 是否存在这样的需求，需要我们使用它的扩展写法呢？NgModel仅仅可以设置目标属性。如果当用户改变输入值，我们需要做一起不同的事情，或者更多地事情呢？ 让我们尝试实现这样一个需求，将用户的输入强制转换成大写字母:
还有一点需要注意：
在表单中需要注意的事项
1.在ng2表单中使用ngModel需要注意,必须带有name属性或者使用 [ngModelOptions]=”{standalone: true}”，二选其一
如果未设置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://www.ucloud.cn/yun/111971.html
摘要：入门系列四和表单元素属性通过实现双向绑定当开发一个数据录入表单的时候，我们常常希望既可以显示数据的属性值，当用户更改时，又可以更新数据的属性值。以及怎么提取当前输入框中的文本值，以便去更新数据属性。 Angular2入门系列（四）————ngModel和表单元素name属性 通过NgModel实现双向绑定当开发一个数据录入表单的时候，我们常常希望既可以显示数据的属性值，当用户更改时，又...
摘要：下面我们看看如果使用是什么样子的，首先我们需要在组件的修饰器中配置，然后在组件的构造函数中使用参数进行依赖注入。 第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三） 第二节：用Form表单做一个登录控件 对于login组件的小改造 在 hello-angularsrcapploginlogin...
摘要：引言是用于构建基于浏览器的复杂应用的下一代框架。它涵盖了的一些基本概念，包括组件模型服务管道传入传出以及事件播散等使用方法，并介绍了项目的基本组织结构等。用于双向绑定，使用来定义，专门用于定义双向绑定。 引言 Angular2 是 Google 用于构建基于浏览器的复杂应用的下一代 MV* 框架。该项目是我学习 Angular2 的入门项目，我觉得它很友好地表达了 Angular2 的...
摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。 刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...
阅读 3241·2021-09-08 09:45
阅读 1222·2019-08-30 15:53
阅读 1482·2019-08-30 14:12
阅读 907·2019-08-29 17:01
阅读 2542·2019-08-29 15:35
阅读 372·2019-08-29 13:09
阅读 1915·2019-08-29 12:32
阅读 3070·2019-08-26 18:37
