typescript ngForm 和 FormControl 的区别

Differences between ngForm and FormControl

提问by Kenry Sanchez

I'm working with forms on Angular 4 and I don't recognize what is the differences using NgFormand FormGrouphandling errors and inputs validators. Is there any big differences handling forms?

我正在使用 Angular 4 上的表单，但我不知道使用NgForm和FormGroup处理错误和输入验证器有什么区别。处理表格有什么大的区别吗？

回答by Dipak Delvadiya

NgFormdoes something handy but non-obvious: it includes the formtag in its selector (instead of requiring you to explicitly add ngFormas an attribute). What this means is that if you import FormsModule, NgFormwill get automatically attached to any tags you have in your view. This is really useful but potentially confusing because it happens behind the scenes.

NgForm做了一些方便但不明显的事情：它在其选择器中包含表单标签（而不是要求您显式添加ngForm作为属性）。这意味着如果您导入FormsModule，NgForm将自动附加到任何你有你的标签。这真的很有用，但可能会令人困惑，因为它发生在幕后。

There are two important pieces of functionality that NgFormgives us:

NgForm为我们提供了两个重要的功能：

1. A FormGroupnamed ngForm
2. A (ngSubmit)output

1. 一个FormGroup命名ngForm
2. A (ngSubmit)输出

You can see that we use both of these in the tag in our view:

您可以看到我们在视图中的标签中同时使用了这两个：

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)"

First we have #f="ngForm". The #v=thingsyntax says that we want to create a local variable for this view. Here we're creating an alias to ngForm, for this view, bound to the variable #f. Where did ngFormcome from in the first place? It came from the NgFormdirective. And what type of object is ngForm? It is a FormGroup. That means we can use f as a FormGroupin our view. And that's exactly what we do in the (ngSubmit)output.

首先我们有#f="ngForm"。该＃V =事情语法说，我们要建立对这一观点的局部变量。在这里，我们为ngForm创建一个别名，对于这个视图，绑定到变量#f。ngForm 最初来自哪里？它来自NgForm指令。ngForm是什么类型的对象？它是一个FormGroup。这意味着我们可以在视图中使用 f 作为FormGroup。这正是我们在(ngSubmit)输出中所做的。

We bind to the ngSubmit action of our form by using the syntax: (ngSubmit)="onSubmit(f.value)".

我们使用以下语法绑定到表单的 ngSubmit 操作：(ngSubmit)="onSubmit(f.value)"。

• (ngSubmit)- comes from NgForm
• onSubmit()- will be implemented in our component definition class
• f.value- fis the FormGroupthat we specified above. And .valuewill return the key/value pairs of this FormGroup

• (ngSubmit)- 来自NgForm
• onSubmit()- 将在我们的组件定义类中实现
• f.value- f是我们上面指定的FormGroup。而.value的将返回此的键/值对FormGroup

For more detail please go through this link.

有关更多详细信息，请访问此链接。

回答by joshrathke

If I am reading this right, you are bumping up against the difference between Template Driven Forms and Reactive Forms.

如果我没看错的话，您就会遇到模板驱动表单和响应式表单之间的区别。

Template Driven Formsare as it sounds; Template Driven. Most if not all of the logic lies in the template. Template driven forms are great for simple forms that don't involve a lot of complicated logic. Template Driven Forms

模板驱动的表单就像听起来一样；模板驱动。大多数（如果不是全部）逻辑都在模板中。模板驱动的表单非常适合不涉及很多复杂逻辑的简单表单。模板驱动的表单

Reactive Formstake a different approach by defining the form logic within the model. Reactive Forms are typically a little bit more advanced and allow quite a bit of customization in terms of functionality and flexibility.Reactive Forms

响应式表单通过在模型中定义表单逻辑来采用不同的方法。响应式表单通常更先进一点，并且允许在功能和灵活性方面进行大量定制。反应式

回答by wintersocram

My comment is very general. For more details, check Reactive From vs Template Driven Form. It is also a question of strategy, synchronicity, tests needs and good practice (check here for example: https://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular/)

我的评论很笼统。有关更多详细信息，请查看 Reactive From vs Template Driven Form。这也是一个策略、同步性、测试需求和良好实践的问题（例如在这里查看：https: //www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular/）

ngForm= Template-Driven = asynchronous = more hard to test = control INSIDE your template = kind of the old way of coding = has a FormGroup type key inside it (the 'form' key).

ngForm= 模板驱动 = 异步 = 更难测试 = 在模板内部进行控制 = 一种旧的编码方式 = 里面有一个 FormGroup 类型的键（“表单”键）。

FormGroup= Reactive Form = synchronous = controls INSIDE your code and BIND to the template: because of that is more easy to test = more modern way of coding = is an object of FormGroup type directly.

FormGroup= Reactive Form = synchronous = 在代码内部控制并绑定到模板：因此更容易测试 = 更现代的编码方式 = 直接是 FormGroup 类型的对象。

In general they do the same, but using ngForminside your template directly you are using the strategy Template-Driven. In this case, the element result is an Object that HAS a key of the type FormGroup (key 'form)'. Then ngForm HAS a FormGroup inside. The control IS in your template. To access that for another place, you need to access the element of the DOM or pass the element using an event. By other hand, using a variable = FormGroupin your JS/TS and bind that variable in your template, you are using the Reactive Formstrategy. In this case, the variable IS an object of type FormGroup directly. The control IS NOT inside your template, but bind to it. Then is more easy to access from another place

一般来说，他们做同样的事情，但直接在你的模板中使用ngForm你正在使用策略Template-Driven。在这种情况下，元素结果是一个对象，它有一个 FormGroup (key 'form)' 类型的键。然后ngForm里面有一个FormGroup。控制在您的模板中。要在另一个地方访问它，您需要访问 DOM 的元素或使用事件传递元素。另一方面，在您的 JS/TS 中使用变量 = FormGroup并在您的模板中绑定该变量，您正在使用反应式表单策略。在这种情况下，变量直接是一个 FormGroup 类型的对象。控件不在您的模板中，而是绑定到它. 然后更容易从另一个地方访问

Well, if ngForm HAS a FormGroup inside then we could tell ngForm is more complete? Not exactly. Is just different ways of have the same result. Template-Driven keeps your values on the template and you will need to manipulate it inside the template directly or have a little more job to to manipulate it in your TS, using events for example (example of that is how to create a custom validation in your form using Template Driven vs Reactive Form). Instead, FormGroup will give you all access from the TS directly and you can control it before going to the template, or access it from another code without have to get the value from the DOM (.getElementById ....).

好吧，如果 ngForm 里面有一个 FormGroup 那么我们可以说 ngForm 更完整吗？不完全是。只是不同的方式有相同的结果。模板驱动将您的值保留在模板上，您将需要直接在模板内操作它，或者有更多的工作在您的 TS 中操作它，例如使用事件（示例是如何在模板中创建自定义验证）您的表单使用模板驱动与反应式表单）。相反，FormGroup 将直接为您提供来自 TS 的所有访问权限，您可以在转到模板之前控制它，或者从另一个代码访问它而无需从 DOM (.getElementById ....) 获取值。

Then in my opinion this is a question about your needs, your strategy and the good practice you are adopting. But basically they was create to gives you the same result.

那么在我看来，这是一个关于您的需求、您的策略和您正在采用的良好实践的问题。但基本上它们是为了给你相同的结果而创建的。