如何跨多个组件创建一个 Reactive 表单

How to create one single Reactive form across multiple components

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

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

我的问题是:

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

如果不可能,

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

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

方案二可以。您需要创建一个 class 或服务中的数据数组,以在您将数据发送到服务器之前保留您的数据。该 class 或一个数组将包含所有 4 个页面的所有数据,并且在每次单击按钮(在每个页面上)时,您将使用该页面的数据填充 class/array 的一部分。当您单击第 4 页上的最终按钮时,您将从 class/array 向服务器发送数据。

  1. 创建一个包含其中所有字段的界面。
  2. 使用您创建的接口类型的变量创建一个公共服务。

    serviceVariable={};

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

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

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