angular material stepper динамически добавляет новые элементы шага при каждом щелчке мышью

В своем проекте я использую угловой материал. Я хочу добавлять дополнительный шаговый элемент (mat-step) при каждом нажатии кнопки addItem.

Я создал здесь плункер. https://stackblitz.com/edit/angular-enmq1z?file=app%2Fstepper-overview-example.ts

Кто-нибудь может мне с этим помочь?

Заранее спасибо.


angular angular-material angular-material-6
person Anji    schedule 20.01.2019    source источник
comment
FormArray - ваш друг!   -  person Prashant Pimpale    schedule 20.01.2019
comment
@PrashantPimpale, я хочу добавить сюда четвертый пункт.   -  person Anji    schedule 20.01.2019
comment
Да, просто используйте forloop с массивом форм   -  person Prashant Pimpale    schedule 20.01.2019
comment
Этот четвертый элемент имеет то же значение, что и третий?   -  person Prashant Pimpale    schedule 20.01.2019
comment
@PrashantPimpale, забудьте о данных внутри шага, я хочу добавлять контент динамически.   -  person Anji    schedule 20.01.2019
comment
Взгляните на: stackblitz.com/edit/dynamic-form-array-by -pmp   -  person Prashant Pimpale    schedule 20.01.2019
comment
Вы можете просто добавить элементы управления formgroup с помощью функции this.formgroup.addcontrol ()   -  person Talg123    schedule 20.01.2019

Ответы (2)


arrow_upward
8
arrow_downward

Я бы использовал FormArray вместе с _ 2_

HTML:

<button mat-raised-button (click)="addItem()">
  add item
</button>
 <form [formGroup]="formGroup">
  <mat-horizontal-stepper  formArrayName="form">
    <mat-step [formGroupName]="i" *ngFor="let customerGroup of formGroup.controls.form.controls; let i = index">
      <ng-template matStepLabel>Step {{i + 1}}</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="cont" required>
      </mat-form-field>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

Код ТС:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl,FormGroup, Validators,FormArray} from '@angular/forms';

/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.css'],
})
export class StepperOverviewExample implements OnInit {
  isLinear = false;
  formGroup : FormGroup;
  form: FormArray;
  constructor(private _formBuilder: FormBuilder) {    
  }

  ngOnInit() {
    this.formGroup = this._formBuilder.group({
      form : this._formBuilder.array([this.init()])
    }) 
    this.addItem();
  }

  init(){
    return this._formBuilder.group({
      cont :new FormControl('', [Validators.required]),
    })
  }

  addItem(){
    this.form = this.formGroup.get('form') as FormArray;
    this.form.push(this.init());
  }
}

Stackblitz

person Prashant Pimpale    schedule 20.01.2019
comment
Я использовал это с небольшими изменениями, чтобы позволить customerGroup formGroup.controls.form.controls; заменен моим собственным массивом. Это действительно хорошо сработало. - person Katherine; 19.11.2020
comment
@ Кэтрин рада, что это помогло тебе! - person Prashant Pimpale; 19.11.2020

arrow_upward
0
arrow_downward

Вы можете использовать FormGroup и FormArray, чтобы заархивировать это.

Для этого проверьте приведенный ниже пример

https://stackblitz.com/edit/dynamic-stepper-material

person Mayur Kambariya    schedule 21.10.2020