具有步骤数组的角度步进式表格数据

Question

使用下面的数据值创建了一个步进器步骤

组件级别

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>

正如预期的那样，DEV-TEST-UAT-PROD即将出现，但问题是所有步骤都有相同的表单数据。我想用单独的表单组数据发布每个步骤。任何人都可以帮助如何实现这一目标

如果添加另一个步骤，则增加步骤级别。

Answer 1

我已经看过你提供的堆栈闪电战样本，我建议如下，即使还有其他处理控件的方法，比如有动态数据的表单控件数组，但我不知道你的场景是什么坚持假设您有4个步骤并且您希望将它们的值存储在表单控件中。

• 使用您尝试循环的键制作FormGroup（这也可以根据您的喜好动态完成）

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

• 在您的component.html文件中，您现在可以将步进器映射到它们自己的FormControl对象，如下所示

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

• 以下只是一段代码，让您了解如何访问这些控件值。如果您完全实现了这里看到的内容，您将在单击“下一步”时看到表单组的进度，并填写相应的数据。

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