0

使用以下数据值创建了一个步进步骤

组件级别

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 出现，但问题是所有步骤都具有相同的表单数据。我想用单独的表单组数据发布每个步骤。任何人都可以帮助如何实现这一目标

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

4

1 回答 1

0

我查看了您提供的堆栈 blitz 示例，并提出以下建议，即使还有其他处理控件的方法，例如为动态数据设置表单控件数组，但我不知道您的方案是什么坚持假设您有 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);
    });
  }

于 2019-02-11T22:07:22.543 回答