Post Data from two forms as one Object in 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.

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
}

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.

I have shared a stackblitz demo here

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 Updated. Please refer to the README.txt

回答1:

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.

EDIT:

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

Working stackblitz

回答2:

You can do it like this create a finalData array where you can accumulate the data you receive from your form1 and form2 and when user finally click on save button you can send data of 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()
  }

working demo : link

Note : see console for final result.

来源：https://stackoverflow.com/questions/59337919/post-data-from-two-forms-as-one-object-in-angular

标签

javascript

angular

typescript

forms

angular-services