如何跨多个组件创建一个单一的响应式表单

Question

我是 Angular 的新手。我的应用程序具有反应形式。它有 4 页（4 个不同的组件）。我的表单字段也分布在 4 个组件中。

每页结束，用户点击按钮导航下一页。第 4 页的提交按钮。我的目的是将表单数据提交到服务器。

我的问题是：

1) 是否可以跨 4 个组件创建一个单一的反应式表单。

如果不可能，

2) 我在所有 4 个页面中创建了 4 种不同的响应式表单。每个页面按钮单击都会将表单数据发送到共享公共服务。 最后第 4 页从服务中获取所有表单数据。这是正确的设计方法吗。请指导我。

3) 如果我遵循上述设计方法，第 4 页我将从所有 4 个组件中获取表单（反应式）数据。如何构建 不同组件（表单）数据的单个 POST 请求数据。

Answer 1

1. 创建一个包含所有字段的界面。

2. 使用您创建的接口类型的变量创建一个公共服务。

   serviceVariable= {};

3. 在每个页面的提交点击中使用object.assign()函数来合并 对象。

   serviceVariable = Object.assign(serviceVariable,formName.value);

4. 最终在 post 请求中使用 serviceVarible。

Answer 2

解决方案 2 很好。您需要在服务中创建一个类或一组数据，以保留您的数据，直到您将其发送到服务器。该类或数组将包含来自所有 4 个页面的所有数据，并且在每次单击按钮时（在每个页面上），您都将使用该页面中的数据填充类/数组的一部分。当您单击第 4 页上的最终按钮时，您会将数据从该类/数组发送到服务器。