Angular Stepper Form Data with Array of steps

Question

created a stepper steps with data values with below

Component Level

environment = [DEV,TEST,UAT,PROD]

HTML

<mat-horizontal-stepper>
<div *ngFor ="let env of environment ; let i =index")
<mat-step [StepControl]= 'diformGroup'>

<form #form="ngForm" [formGroup]="pipe">
<input matInput >
</form>
</mat-step>

</mat-horizontal-stepper>

as expected the steps as are coming as DEV- TEST- UAT - PROD , but the issue is all the steps having same form data .i wanted to publish each step with separate form group data. can any one help how to achieve this

if add another step it increase the step level.

the [stepControl] -be carefullty, Angular is case -sensitive -you has put StepControl-) need a FormControl or FormGroup. — Eliseo, Feb 11 '19 at 22:58

Thriller · Answer 1 · 2019-02-13T09:03:34.297

I have looked at the stack blitz sample that you have provided and I suggest the following, even though there are also other ways of handling the controls such as having form control arrays for dynamic data, but as I don't know what is your scenario stick to the assumption that you have 4 steps and you want to have their values stored in a form control.

Make a FormGroup with keys you are trying to loop (this can be done also dynamically based on your preferences)

 formGroupObj = new FormGroup({
    DEV: new FormControl(),
    TEST: new FormControl(),
    UAT: new FormControl(),
    PROD: new FormControl()
  });

In your component.html file now you can map the steppers to their own FormControl object as follows

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>

<mat-horizontal-stepper lablePosition="bottom" [linear]="isLinear" #stepper>
  <mat-step *ngFor="let env of environment" [formGroup]="formGroupObj">
          <ng-template matStepLabel>{{env.label}}</ng-template>
      <mat-form-field>
        <mat-label>Answer</mat-label>
        <input matInput [formControlName]="env.label">
      </mat-form-field>
      <div>
        <button mat-button matStepperNext (click)="printControl()">Next</button>
      </div>
    </mat-step>
</mat-horizontal-stepper>

And the following is just a piece of code giving you the idea of how to access these control values. If you exactly implement what you see here you will see the progress of the form group filling up with the corresponding data as you click "next".

  printControl() {
    this.environment.forEach(item=>{
      let formVal = this.formGroupObj.controls[item.label].value;
      console.log('value for control ' + item.label + ' is: '+ formVal);
    });
  }

this works when you have steps declared as static and then you can carve your data as form inside each step. But my situation is when i assigned steps which are from the data array ,which means an variable is having step details as said environment =['DEV','TEST','UAT','PROD'], all the formgroup data for each step should come as unique formdata associated with step not same , as unique.let me see if I can push stackbliz — vijay munnangi, Feb 11 '19 at 23:35
html code
{{env}}

ts code just add environmnet =["DEV","TEST","UAT","PROD"] — vijay munnangi, Feb 12 '19 at 06:05
can any one help with this https://stackblitz.com/edit/angular-material-stepper212 — vijay munnangi, Feb 12 '19 at 23:27

Angular Stepper Form Data with Array of steps

1 Answers1