Angular 2 RC5编写基于模板的表单的方式是什么?

What is the Angular 2 RC5 way of writing template based forms?

本文关键字：表单 方式 是什么 于模板 RC5 Angular      更新时间：2023-09-26

我必须说我完全被网上关于RC5 Angular表单的不同教程弄糊涂了。官方文档也没有澄清这种混淆。

大量的指令(ngForm, ngModel, ngFormControl, ngControl, ngFormControlName, ngControlName，我错过了什么吗?)有些被弃用了，有些没有。

另外，所有的教程都走简单的路径-纯文本输入或选择控件。如果我需要单选按钮和复选框呢?

总之，我不知道如何在RC5中编写表单。

是否有一个例子，是最新的，并解释:

  1. 4个基本控件的使用-输入文本/单选/复选框和选择?
  2. 额外的好处，如肮脏/原始，验证?
  3. 表单模型(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
此外，我在这里有一些代码可能有助于说明有效/无效

相关文章：