Angular 2 RC5 编写基于模板的表单的方式是啥？

Posted 2023-03-13

【中文标题】Angular 2 RC5 编写基于模板的表单的方式是啥？

【英文标题】：What is the Angular 2 RC5 way of writing template based forms?Angular 2 RC5 编写基于模板的表单的方式是什么？

【发布时间】：2017-01-04 20:48:31

【问题描述】：

我必须说我完全被网络上关于 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 中编写表单的正确方法是什么。

【问题讨论】：

不要错过这个：blog.thoughtram.io/angular/2016/06/22/… :)

是的，让我们结束这个问题。了解 ng2 RC5 表单示例是没有用的，因为毕竟“好”是一个主观的东西，我们不能承受 SO 答案的主观性。

【参考方案1】：

我发现 angular2 表单真正令人困惑的是，有两种完全不同的方式来构建它们，而且这两种方式不能很好地混合。你有“模板驱动”，表单在 html 中尽可能多地构建和处理，然后你有“模型驱动”，表单在组件端处理。

我发现的对不同类型的最佳描述是这个视频，Kara Erickson 对这两种类型都做了演示。她在 10-11 分钟左右很好地解释了这些差异：

https://www.youtube.com/watch?v=E92KS_YCSf8

简而言之：

---

模板驱动的表单

如果您想在模板 html 中完成所有表单处理（绑定、验证等），请使用以下指令：

ngModel ngModelGroup ngForm

---

模型驱动表单（也称为反应式表单）

如果您想要更好的控制、更好的可测试性、自定义验证器等，请使用这些控件在组件中手动生成表单：

表单组 表单控件 表单数组 可以选择使用 FormBuilder 来减少一些样板文件

然后使用这些指令将您的 html form 和 input 元素绑定到这些控件：

formControlName formGroupName

---

2016-09-02 编辑： 现在官方文档中有一本很好的食谱，很好地涵盖了模板/反应式表单之间的差异： https://angular.io/docs/ts/latest/cookbook/form-validation.html

【参考方案2】：

我喜欢 FormBuilder，因为大部分代码都在 ts 中而不是 html 中，所以有更好的编译时错误检查。 This page from the Angular2 documentation has a simple example. PrimeNG 有一些很棒的控件使用 FormBuilder 另外，我有一些code here 可能有助于说明有效/无效