如何将角材步进器的数据发布到Node.Js后端

我在前端有角度，在后端有node.js

我使用了角形材料步进机，每步都有3个窗体form1，form2，form3，在最后一步我需要将所有对象都合并到一个对象中，然后将其发布到Node.js，这是我的新手，感谢您的帮助。

波纹管是我的代码：

   <mat-horizontal-stepper linear #stepper>
<mat-step [stepControl]="firstFormGroup">
  <form [formGroup]="firstFormGroup" #personalInfo="ngForm" (ngSubmit)="form1()">
    <ng-template matStepLabel>Personal Information</ng-template>
    <mat-form-field>
      <input matInput placeholder="Surname/Family name" formControlName="lastnameCtrl" required>
    </mat-form-field>
    <br />
    <mat-form-field>
      <input matInput placeholder="First name" formControlName="firstnameCtrl" required>
    </mat-form-field>
    <br />
    <mat-form-field>
        <mat-label>Gender</mat-label>
        <mat-select [formControl]="genderControl" required>
            <mat-option></mat-option>
            <mat-option *ngFor="let gender of genders" [value]="gender">
              {{gender.value}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="genderControl.hasError('required')">Please choose gender</mat-error>
    </mat-form-field>
    <div>
      <!-- <button [disabled]="personalInfo.invalid" mat-raised-button color="warn" matStepperNext type="submit" >Save & continue</button> -->
      <button mat-raised-button color="primary"   matStepperNext>Next</button>
    </div>
  </form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
  <form [formGroup]="secondFormGroup" #programAvailability="ngForm" (ngSubmit)="form2()">
    <ng-template matStepLabel>Program Availability</ng-template>
    <mat-form-field>
      <input matInput placeholder="Email" formControlName="emailCtrl" required>
    </mat-form-field>
    <div>
      <button mat-raised-button matStepperPrevious>Back</button>&nbsp;
      <button mat-raised-button color="primary" matStepperNext>Next</button>
    </div>
  </form>
</mat-step>
<mat-step>
  <form [formGroup]="thirdFormGroup" #programAvailability="ngForm" (ngSubmit)="form3()">
    <ng-template matStepLabel>Confirm & submit</ng-template>
    <mat-checkbox formControlName="agreementCtrl" (change)="changeCheck($event)"> I agree to....</mat-checkbox>
    <div>
      <button mat-raised-button  matStepperPrevious>Back</button> &nbsp;
      <button mat-raised-button [disabled]="disabledAgreement" color="primary" matStepperNext type="submit" >Submit</button>
      &nbsp;
      <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
    </div>
  </form>
</mat-step>

我的组件代码在这里：

       import { Component, OnInit} from '@angular/core';
import { merge } from 'rxjs';
import {FormBuilder,FormControl, FormGroup, Validators} from '@angular/forms';
import{AgentService} from '../../services/agent.service';
import {PersonalData,ContactRequest, Agent} from '../../models/applicant.model';
import {ApplicantService} from '../../services/applicant.service';



@Component({
  selector: 'app-manage-agent',
  templateUrl: './manage-agentponent.html',
  styleUrls: ['./manage-agentponent.css']
})
export class ManageAgentComponent implements OnInit {

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  thirdFormGroup:FormGroup;
  selectedValue: string;
  isEditable = false;


  constructor(private agentService:AgentService,private _formBuilder: FormBuilder,private service:ApplicantService) { }
  genderControl = new FormControl('', [Validators.required]);
  genders: Gender[] = [
    {value: 'Male', viewValue: 'Male'},
    {value: 'Female', viewValue: 'Female'}
  ];

  ngOnInit() {
    //this.agentService.getNode();
    this.firstFormGroup = this._formBuilder.group({
      lastnameCtrl: ['', Validators.required],
      firstnameCtrl: ['', Validators.required]
      //genderCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      emailCtrl: ['', Validators.required]
    });
    this.thirdFormGroup = this._formBuilder.group({
      agreementCtrl: ['', Validators.required]
    });


  }

  disabledAgreement: boolean = true;
  changeCheck(event){
    this.disabledAgreement = !event.checked;
  }
  form1(){
    console.log(this.firstFormGroup.value);
  }
  form2(){
    console.log(this.secondFormGroup.value);
  }
  form3(){

    if(this.firstFormGroup.valid && this.secondFormGroup.valid && this.thirdFormGroup.valid){
      console.log('----form is valid----');
      console.log(this.firstFormGroup.value);
      console.log(this.secondFormGroup.value);
      console.log(this.thirdFormGroup.value);

      const f1 = this.firstFormGroup.value;
      const f2 = this.secondFormGroup.value;
      const f3 = this.thirdFormGroup.value;

      if(this.service.formData.Id==0){
        this.insertRecord(form);
      }
      //---------Update Record---------//
      else{
        this.UpdateRecord(form);
        this.resetForm();
      } 

    }else{
      console.log('--- form is invalid');
    }
  }

您可以在“提交”更改时合并表单中的值。

if(this.firstFormGroup.valid && this.secondFormGroup.valid && this.thirdFormGroup.valid){

  const result = Object.assign({}, this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value);

      if(this.service.formData.Id==0){

        this.insertRecord(result);

      } else {

        this.UpdateRecord(result);
        this.resetForm();

      } 

    }else{
      console.log('--- form is invalid');
    }