ngForm 和 FormControl 的区别

Posted 2023-03-13

【中文标题】ngForm 和 FormControl 的区别

【英文标题】：Differences between ngForm and FormControl

【发布时间】：2018-06-17 01:41:45

【问题描述】：

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

【问题讨论】：

您的标题（ngForm vs FormControl）与您的实际问题（ngForm vs FormGroup）不同

【参考方案1】：

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

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

反应式表单通过在模型中定义表单逻辑采用不同的方法。反应式表单通常更高级一些，并且在功能和灵活性方面允许进行相当多的自定义。Reactive Forms

【参考方案2】：

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

ngForm = 模板驱动 = 异步 = 更难测试 = 在你的模板内控制 = 一种旧的编码方式 = 里面有一个 FormGroup 类型的键（'form' 键） .

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

一般情况下，它们的作用相同，但直接在模板中使用 ngForm，您使用的是 Template-Driven 策略。在这种情况下，元素结果是一个对象，它具有 FormGroup 类型的键（键'form）'。然后ngForm里面有一个FormGroup。 控件在您的模板中。要在另一个地方访问它，您需要访问 DOM 的元素或使用事件传递元素。 另一方面，在您的 JS/TS 中使用变量 = FormGroup 并在模板中绑定该变量，您正在使用 Reactive Form 策略。在这种情况下，变量直接是 FormGroup 类型的对象。 控件不在您的模板内，而是绑定到它。然后更容易从其他地方访问

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

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