将两种表单中的数据作为 Angular 中的一个对象发布

这是我在 Angular 上的第一个项目，我已经尽我所能，我会尝试自己完成它，但我觉得我需要帮助。

项目简介： 我有课mod.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 个输入字段。

我分享过一个stackblitz 演示在这里

这是流程，用户从单选按钮中选择值并将它们保存为对象（以供稍后使用），然后用户单击编辑表单并填写字段。一旦用户单击此表单中的“添加”，我们应该会看到一个 div，其中显示在表单的“txt”字段中输入的文本，同时，所有数据都应被推入 FinalPostArray，从中可以将其发送到服务器。这就是我打算这样做的方式，不知道是否有替代方案。 我无法弄清楚如何使用这两种形式将数据作为一个对象发送到服务器。如果您需要更多说明，请帮助或告诉我。

堆栈闪电战已更新。请参考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();
} 

现在，根据您的用例，您可以决定何时进行post将此数据发送到后端。

EDIT:

由于您想合并为单个对象，请使用：

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();
}

工作堆栈闪电战