Angular - 当并非所有字段都来自用户输入时提交表单答案

【问题标题】：Angular - submitting a form when not all the fields are from user inputAngular - 当并非所有字段都来自用户输入时提交表单
【发布时间】：2021-08-20 21:34:02
【问题描述】：

我刚刚了解了 Angular 表单，并且我设法通过教程制作了一个登录表单和一个注册表单，而且这些表单非常简单。但是现在我想制作一个表单，用户不需要输入所有字段（表格条目），而且我对此很陌生，甚至不知道是否可行。

例如，假设我构建了一个社交媒体应用程序，用户登录然后发布某种类型的帖子。自然地，帖子将进入与用户表不同的数据库表中，其中将存储帖子的内容，以及发布者。那么，如果我可以从用户在表单中输入的内容中获取帖子的内容，我如何在提交表单之前访问有关用户的信息？还是可以在之后“添加”它？

【问题讨论】：

我会举一个例子，因为你的问题不是那么具体：当你登录应用程序时，你已经有了用户信息。所以我想你可以将用户信息传递到你的表单页面，在那里你将在表单中显示用户名。现在，当您发布消息时，您还将传递用户 ID 以及帖子详细信息，以便将帖子保存在某个用户 ID 下，该用户 ID 引用数据库中的用户表。
另外，如果您可以在此处粘贴您所做的一些代码示例，最好是一个笨拙的工作示例。如果您想了解如何在从一个页面导航到另一个页面时传递信息，请查看stackoverflow.com/a/44865817/1398461 或关于组件通信的官方文档angular.io/guide/component-interaction#!#bidirectional-service

标签： angular typescript frontend

【解决方案1】：

一切皆有可能，尤其是这实际上相当普遍。

回答您的问题：在用户发布他通常已经登录的内容时。在整个应用程序范围内使用服务时，用户的信息在填写表单时可用。

您可以对部分（或全部）字段使用初始化函数来使用数据初始化表单。
您可以在进行实际 http 调用时填写请求中的数据（这是更好的选择）。

给一个对象添加更多的值是很容易的：

{ ...this.formData, ...this.additionalData }

更多提示：

您可能希望在 onInit() 方法中使用对后端服务的请求来填充某些表单（如编辑表单）。
您可以制作相当简单的模板驱动表单，但如果您想制作更复杂、动态和可测试的表单，您可能需要研究“反应式表单”。
如果您只想在 typescript 代码中更改表单中的某些值，您可以在表单上使用 .patchValue() 而不是 .setValue()，这需要所有表单字段。
我可以在表格上推荐 Deborah Kurata 的课程。

很高兴为您解答任何更具体的问题。愉快地学习 Angular，创建良好且用户友好的表单是一项很好的技能。

【讨论】：

非常感谢您抽出宝贵时间回答并提供所有这些信息！我很确定我现在明白了，我会去检查一下。再次感谢您！
嘿@H3AR7B3A7 如果您不介意，我实际上还有一个问题！这是关于你上次帮助我的事情。我试着照你说的去做；在附加到表单“提交”按钮的函数中，在进行 http 调用之前，我尝试设置一个不在表单中的对象字段（一个数字），但是在检查数据库后，条目是始终为 0。我尝试以几种不同的方式执行此操作，但始终为 0。奇怪的是，如果我对该对象的字段执行 console.log，它会按预期显示，而不是 0。不过，它在数据库中保存为 0。
如果您在Stackblitz 上创建项目，我们可以更轻松地帮助您解决问题所在。我看一下你的代码。也就是说，您可能想尝试在保存表单的组件的 onInit 中设置值。例如：如果这是您在绑定到提交按钮的 func 中合并的数据：'const p = { ...this.product, ...this.productForm.value }; ' 如果可能，请在创建组件时尝试设置 this.product 的值。这样，您可以确定它们在提交之前已设置。根据情况还有其他解决方案。