Angular 2 RC5编写基于模板的表单的方式是什么?
What is the Angular 2 RC5 way of writing template based forms?
我必须说我完全被网上关于RC5 Angular表单的不同教程弄糊涂了。官方文档也没有澄清这种混淆。
大量的指令(ngForm, ngModel, ngFormControl, ngControl, ngFormControlName, ngControlName,我错过了什么吗?)有些被弃用了,有些没有。
另外,所有的教程都走简单的路径-纯文本输入或选择控件。如果我需要单选按钮和复选框呢?
总之,我不知道如何在RC5中编写表单。
是否有一个例子,是最新的,并解释:
- 4个基本控件的使用-输入文本/单选/复选框和选择?
- 额外的好处,如肮脏/原始,验证?
- 表单模型(FormBuilder, FormGroup, FormControl等)
我读了什么?
- https://angular.io/docs/ts/latest/guide/forms.html
- https://scotch.io/tutorials/using-angular-2s-template-driven-forms
- https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol
- https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
- http://blog.rangle.io/how-angular-2-form-models-work/
- http://blog.rangle.io/data-angular-2-forms/
我可能很笨,但我仍然不知道在RC5中写表单的正确方法是什么
关于angular2表单,我发现真正令人困惑的是有两种完全不同的构建方式,而且这两种方式不能很好地混合在一起。你有"模板驱动",表单在html中尽可能多地构建和处理,然后你有"模型驱动",表单在组件端处理。
我找到的对不同类型的最佳描述是这个视频,Kara Erickson对这两种类型都做了演示。她很好地解释了10-11分钟的差异:
https://www.youtube.com/watch?v=E92KS_YCSf8 简而言之:模板驱动表单
如果你想在模板html中完成所有表单处理(绑定,验证等),使用这些指令:
- ngModel
- ngModelGroup
- ngForm
模型驱动表单(也称为响应式表单)
如果你想有更好的控制,更好的可测试性,自定义验证器等,使用这些控件在组件中手动生成表单:
- FormGroup
- FormControl
- FormArray
- 可选择使用
FormBuilder
来减少一些样板
然后使用以下指令将你的html form
和input
元素绑定到这些控件:
- formControlName
- formGroupName
编辑2016-09-02:现在在官方文档中有一本很好的食谱,很好地涵盖了模板和响应式表单之间的差异:https://angular.io/docs/ts/latest/cookbook/form-validation.html
我喜欢FormBuilder,因为大多数代码是在ts而不是html中,所以有更好的编译时错误检查。Angular2文档中的这一页有一个简单的例子。
PrimeNG有一些很棒的控件使用FormBuilder
此外,我在这里有一些代码可能有助于说明有效/无效
- 使用AJAX在Rails中提交动态表单的最佳方式是什么
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- Ajax 请求后,以正常方式提交表单
- 使用两个按钮(提交按钮和普通按钮),它们应该以不同的方式提交相同的表单
- 临时存储用户表单数据的最佳方式,用于表单重新提交
- 如何使用Angularjs以PHP方式提交表单
- 如何以正确的方式触发表单提交
- 在向导表单中使用按钮提交值的最佳方式
- 在rails中选择向表单添加文本字段的最佳方式
- Jquery/javascript方式发送50个表单,就像发送1个表单一样
- 以编程方式自动填写和提交表单
- 实现动态表单验证 Rails 的最佳方式
- Drupal 7 Field API:如何以编程方式发送表单元素属性 #ajax 指定的AJAX请求
- 将表单的 enctype 设置为 application/json 的角度方式
- 通过单击按钮或表单提交禁用注册按钮,这两种方式都会阻止表单提交
- 更改表单的提交方式,而无需使用 JavaScript
- 以编程方式提交角度表单,但仍会收到 HTML5 验证错误
- 通过 JS 以编程方式触发 JSF ajax 表单
- 使用离子移动应用程序与 Django 进行表单处理的最佳方式
- 在Angular中显示表单验证错误的正确方式