Javascript 将两个窗体中的数据作为一个对象以角度

这是我在Angular上的第一个项目，我已经尽了最大的努力，我会努力自己完成它，但我觉得我需要帮助

项目简介： 我有一门课，是关于ts的

export interface Mod {
    id : number ,
    name? : string,
    clauseList? : Clause
    country? : string;
    company? : string;
    process? : string;
}

export interface Clause {
    cName? : string,
    cid? : number,
    // pc : number,
    parentC?  :number,
    id? : number,
    text? : Text
}


export interface Text {
    txt? : string,
    tid? : number
}

这是用户将发送到后端的表单数据的结构，值将来自两个不同的表单。 我将表格命名为clauseForm和filterForm。filterform是来自4个不同数组的单选按钮的集合，clauseForm是3个输入字段

我有一个共同的梦想

以下是流程，用户从单选按钮中选择值并将其保存为对象（稍后使用），然后用户单击编辑表单并填写字段。一旦用户单击此表单中的add，我们将看到一个div，其中显示在表单的“txt”字段中输入的文本，同时，所有数据都应推送到finalPostArray，从中可以将其发送到服务器。这就是我计划做的，idk，如果有其他选择的话。 我不知道如何使用这两个表单将数据作为一个对象发送到服务器。如果您需要更多的澄清，请帮助或让我知道

---

Stackblitz已更新。如果要合并来自两个对象的表单数据，请参阅README.txt，可以执行以下操作：

finalData = {};

saveClause(form: NgForm) {
   this.show1 = true;
   Object.assign(this.finalData, form.value);
}

addFilter(filter: NgForm) {
   Object.assign(this.finalData, filter.value);
   filter.reset();
} 

现在，根据您的用例，您可以决定何时将此数据发布到后端

---

编辑：

由于要合并到单个对象中，请使用：

finalPostArray = [];
mergedObj = {};

saveClause(form: NgForm) {
   ... 
   Object.assign(this.mergedObj, form.value);
   this.finalPostArray.push(this.mergedObj);
   ... 
}

addFilter(filter: NgForm) {
   Object.assign(this.mergedObj, filter.value);
   filter.reset();
}

---

您可以这样做创建一个

finalData

数组，在该数组中您可以累积从form1和form2收到的数据，当用户最后单击“保存”按钮时，您可以发送

finalData

的数据

  form1Data = [];
  form2Data = [];
  finalData = [];

  saveClause(form  :NgForm){
    console.log("Form Values",form.value);
    this.form1Data = form.value;
    this.show1 = true
  }

  addFilter(filter : NgForm){
    console.log("FilterForm Value",filter.value)
    this.form2Data = filter.value;
    this.finalData.push({
      ...this.form1Data,
      ...this.form2Data
    });

    console.log(this.finalData);

    filter.reset()
  }

工作演示：

---

注意：查看控制台了解最终结果。

谢谢，我已经更新了演示，我对POST请求感到困惑。请你看一下什么时候发邮件？还有，什么和它不起作用++如果您试图保存数组中的所有内容，则需要将其推送到数组中，即

this.finalPostArray.push（filter.value）我不知道为什么我只在Stackblitz上得到这个，但是当我在本地机器上按“保存”时，我可以看到数组填充了表单值，但是在Stackblitz上数组没有填充值。我已经完成了你的Stackblitz，并做了我在中提到的更改。这里是。finalPostArray内部有两个对象，我需要一个包含嵌套对象的单个对象。我在Stackblitz和我的本地机器上有相同的代码，我不明白为什么它不在这里工作。阵列在我的本地计算机上看起来像这样