首页 文章

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

提问于
浏览 次
5

我必须说我对Web上关于RC5 Angular表单的不同教程完全感到困惑 . 官方文件也没有消除混乱 .

丰富的指令（ngForm，ngModel，ngFormControl，ngControl，ngFormControlName，ngControlName，我错过了什么吗？）有些已被弃用，有些则不赞成 .

此外，所有教程都是简单的路径 - 纯文本输入或选择控件 . 如果我需要单选按钮和复选框？

简而言之，我不知道如何在RC5中编写表单 .

在某处有一个例子，这是最新的并解释：

  • 使用4个基本控件 - 输入文本/收音机/复选框并选择？

  • 额外的好东西，比如脏/原始，验证？

  • 表单模型（FormBuilder，FormGroup，FormControl等...）

附：

我读了什么？

我可能很愚蠢，但我仍然不知道在RC5中编写表单的正确方法是什么 .

javascript forms angular

2 回答

  • 1

    我发现对angular2形式非常困惑的是，有两种完全不同的构建它们的方式，并且这两种方式不能很好地混合 . 你有“模板驱动”，在html中尽可能地构建和处理表单，然后你有“模型驱动”，在组件方面处理表单 .

    我发现的不同类型的最佳描述是这个视频，其中卡拉埃里克森做了两个演示 . 她解释了10-11分钟左右的差异：

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

    简而言之：

    Template driven forms

    如果要在模板html中执行所有表单处理（绑定，验证等），请使用以下指令：

    • ngModel

    • ngModelGroup

    • ngForm

    Model-driven forms （也称为 Reactive forms ）

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

    • FormGroup

    • FormControl

    • FormArray

    • 可选择使用 FormBuilder 来减少一些样板

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

    • formControlName

    • formGroupName

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

    回复于
  • -1

    我喜欢FormBuilder，因为大多数代码都在ts而不是html中，所以有更好的编译时错误检查 . This page from the Angular2 documentation has a simple example .

    PrimeNG有一些很棒的控件使用FormBuilder
    另外，我有一些code here可能有助于说明有效/无效

    回复于

相关问题