Данные формы углового степпера с массивом шагов - PullRequest
Новая
       31

Данные формы углового степпера с массивом шагов

0 голосов
/ 12 февраля 2019

создал пошаговые шаги со значениями данных ниже

Уровень компонента 

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>

, как и ожидалось, шаги, которые идут как DEVESTEST- UAT - PROD, но проблема заключается во всех шагах, имеющих одинаковые данные формы. Я хотел опубликовать каждый шаг с отдельными данными группы форм.Может ли кто-нибудь помочь, как достичь этого

, если добавить еще один шаг, это увеличит уровень шага.

1 Ответ

0 голосов
/ 12 февраля 2019

Я посмотрел на предоставленный вами пример стека-блица и предлагаю следующее, хотя есть и другие способы обработки элементов управления, например наличие массивов элементов управления для динамических данных, но поскольку я не знаю, чтоВаш сценарий придерживается предположения, что у вас есть 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);
    });
  }
...