将两种形式的数据作为Angular中的一个对象发布 [英] Post Data from two forms as one Object in Angular

问题描述

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

This is my first project on Angular and I have done as much as I could and I will try to finish it myself but I feel like that I require help.

项目简介: 我有一堂课 mod.ts

A brief description of the project : I have a 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个不同数组的单选按钮的集合，子句Form是3个输入字段.

This is the structure of form data that a user will send to the backend and the values will come from two different forms. I have named the forms as clauseForm and filterForm. The filterform is a collection of radio buttons from 4 different arrays and the clauseForm is 3 input fields.

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

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

here is the flow, The user selects the values from the radio buttons and saves them as an object(to use them later), then the user clicks on the edit form and fills in the fields. once the user clicks on add in this form, we should see a div with displaying the text entered in the "txt" field of the form and, simultaneously, all the data should be pushed into finalPostArray from which it can be sent to the server. This is how I am planning to do it, idk if there is an alternative. I cannot figure out how to use the two forms to send the data to the server as one object. Please help or let me know if you need more clarification.

Stackblitz已更新.请参阅README.txt

推荐答案

如果要合并来自两个对象的表单数据，可以执行以下操作:

If you want to merge form data from both objects you can do:

finalData = {};

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

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

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

Now depending on your use case you can decide when to post this data to the backend.

由于要合并为单个对象，请使用:

Since you want to merge into a single object use:

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

正在工作的堆叠闪电游戏

这篇关于将两种形式的数据作为Angular中的一个对象发布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！