0

I am trying to send data from the angular material steppers to a database and read it back. So far, I am able to send it to the back end from the steppers. But failed to populate each stepper with data from the database, to edit for a particular case. I have a separate component for each stepper (create-stepper-step-one, create-stepper-step-two, create-stepper-step-three) and a main stepper (create-stepper)that holds all the steppers together.

create-stepper.ts

  id?: number;

  title: string;

  model: StepperToDisplayDto;  //holds the data of all the steppers


loadData() {

    this.id = +this.activatedRoute.snapshot.paramMap.get('id');

    if (this.id) {

      this.stepperService

        .getById<StepperToDisplayDto>(this.id)

        .subscribe((result) => {

          this.model = result

          //console.log(result);  // able to see all the forms data here

          this.title = 'Edit Stepper';

        });

    } else {

      this.title = 'Add New Stepper';

    }


  submit(step1, step2, step3) {

    const result = Object.assign({}, step1, step2, step3);

    this.stepperService.postStepper<StepperCreationDto>(result).subscribe(

      () => {

        this.router.navigate(['/steppers']);

      },

      (error) => console.log(error)

    );

  }

create-steppers.html

<h2>{{title}}</h2>

<div class="Create-stepper-panel data-form">

    <!-- <h2 class="title" class="btn btn-success">Create Stepper</h2> -->

    <mat-horizontal-stepper [linear]="true" class="mat-elevation-z5" labelPosition="bottom">


            <!-- step-1 -->

    <mat-step [stepControl]="step1.form">

        <ng-template matStepLabel>Full Name details</ng-template>

        <app-create-stepper-step-one #step1></app-create-stepper-step-one>

        <div class="stepper-buttons">

            <button mat-raised-button color="primary" matStepperNext>Continue to Step 2</button>

        </div>

      </mat-step>


   <!-- step-2 -->

  <mat-step [stepControl]="step2.form" errorMessage="Address in error">

    <app-create-stepper-step-two #step2></app-create-stepper-step-two>

    <ng-template matStepLabel>Address details</ng-template>

    <div class="stepper-buttons">

        <button mat-raised-button matStepperPrevious>Back</button>

        <button mat-raised-button color="primary" matStepperNext>Continue to Step 3</button>

    </div>

  </mat-step>


    <!-- step-3 -->

    <mat-step [stepControl]="step3.form" errorMessage="Other errors">

      <app-create-stepper-step-three #step3></app-create-stepper-step-three>

      <ng-template matStepLabel>Others</ng-template>

      <div class="stepper-buttons">

          <button mat-raised-button matStepperPrevious>Back</button>

          <button mat-raised-button color="primary"

              (click)="submit(step1.form.value,step2.form.value,step3.form.value)"

              >Create Stepper</button>

      </div>

    </mat-step>

  </mat-horizontal-stepper>

I am able to read the data that is coming from the database in the console of the main stepper but stack in filtering of this data and populate to each stepper’s form.(For example: I want to put firstName, middleName, lastName,gender, dateOfBirth in step1 form, countryofBirth and nationality in step2 form and email and phoneNumber in step3 form)

enter image description here

Naod Agere
  • 39
  • 1
  • 6

1 Answers1

0

I solved the issue by creating a separate Dto in the front end as well as the back end for each stepper form values. Happy to see if there is a better way.

steppers.ts

export interface step1Dto {
  firstName: string;
  middleName: string;
  lastName: string;
  gender: string;
}
export interface step2Dto {
  countryOfBirth: string;
  nationality: string;
}

export interface step3Dto {
  email: string;
  phoneNumber: string;
}

export interface StepperAllDto {
  step1Dto: step1Dto;
  step2Dto: step2Dto;
  step3Dto: step3Dto;
}

create-stepper.ts

loadData() {
    this.id = +this.activatedRoute.snapshot.paramMap.get('id');
    if (this.id) {
      this.stepperService
        .getStepsData(this.id)
        .subscribe((result) => {
          this.modelStep1 = result.step1Dto;
          this.modelStep2 = result.step2Dto;
          this.modelStep3 = result.step3Dto;
        });

      this.title = 'Edit Stepper';
    } else {
      this.title = 'Add New Stepper';
    }
  }

create-steppers.html

 <!-- step-1 -->
<mat-step [stepControl]="step1.formStep1">
  <ng-template matStepLabel>Full Name details</ng-template>

  <app-create-stepper-step-one #step1
    [modelStep1]="modelStep1"
  ></app-create-stepper-step-one>

  <div class="stepper-buttons">
    <button mat-raised-button color="primary" matStepperNext>
      Continue to Step 2
    </button>
  </div>
</mat-step>

stepper.service.ts

  getStepsData(id: number) {
    return this.http.get<StepperAllDto>(`${this.apiUrl}/${id}`);
  }
Naod Agere
  • 39
  • 1
  • 6