1

I have angular in front end and node.js in back end

I used angular material form stepper, it has 3 forms form1, form2, form3 for each step, on the last step I need to join all objects in to one and post it to Node.js, I am new any help will be appreciated thanks.

bellow is my code:

   <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>

and my component code is here:

       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-agent.component.html',
  styleUrls: ['./manage-agent.component.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');
    }
  }
  • Why you dont merge the values from form1, form2, form3? – pedro.olimpio Oct 15 at 15:04
0

You can merge values from forms at the moment you are "commiting" the changes.

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');
    }
  • {validator: null, asyncValidator: null, pristine: false, touched: true, _onCollectionChange: ƒ, …} asyncValidator: null controls: {agreementCtrl: FormControl} errors: null pristine: false status: "VALID" statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …} touched: true validator: null value: {agreementCtrl: true} valueChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, – CodeOnly Oct 15 at 15:19
  • it brings only the last checkbox which is agreement control when I do console.log(result) – CodeOnly Oct 15 at 15:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.