将两种形式的数据作为一个对象在 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 个不同数组的单选按钮的集合，而 clauseForm 是 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 演示

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

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

工作stackblitz

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