Post 来自两个表单的数据作为一个对象 Angular

Question

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

项目简介：我有一个 class 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 demo here

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

Stackblitz 已更新。请参考README.txt

Answer 1

如果您想合并来自两个对象的表单数据，您可以这样做：

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发送到后端。

编辑：

因为你想合并成一个单一的对象使用：

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

Working stackblitz

Answer 2

您可以这样创建一个 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()
  }

工作演示 : link

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

Post 来自两个表单的数据作为一个对象 Angular

Post Data from two forms as one Object in Angular

javascript

forms

typescript

angular-services

angular