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

私はあなたが提供したスタックブリッツのサンプルを見てきましたが、動的データ用のフォームコントロール配列を持つなど、コントロールを処理する他の方法もありますが、あなたのシナリオが何であるかはわかりません. 4 つのステップがあり、それらの値をフォーム コントロールに保存したいという前提に固執してください。

  • ループしようとしているキーでaFormGroupを作成します (これは、好みに基づいて動的に行うこともできます)。

 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 に答える