角度材料步进器在每次点击时动态添加新的步骤项目 [英] angular material stepper add new step items dynamically on every click

问题描述

我在我的项目中使用角材料.我想在每次点击 addItem 按钮时添加额外的步进项目(mat-step).

我在这里创建了一个plunker.https://stackblitz.com/edit/angular-enmq1z?file=app%2Fstepper-overview-example.ts

谁能帮我解决这个问题?

提前致谢.

解决方案

我会使用 FormArray 以及 FormGroup

HTML:

新增项目<form [formGroup]="formGroup"><mat-h​​orizo​​ntal-stepper formArrayName="form"><mat-step [formGroupName]="i" *ngFor="let customerGroup of formGroup.controls.form.controls; let i = index"><ng-template matStepLabel>步骤{{i + 1}}</ng-template><mat-form-field><input matInput placeholder="Address" formControlName="cont" required></mat-form-field><div><button mat-button matStepperPrevious>返回</button><button mat-button matStepperNext>Next</button>

</mat-step></mat-h​​orizo​​ntal-stepper></表单>

TS 代码:

import {Component, OnInit} from '@angular/core';从@angular/forms"导入 {FormBuilder、FormControl、FormGroup、Validators、FormArray}；/*** @title 步进器概述*/@成分({选择器:步进器概览示例"，templateUrl: 'stepper-overview-example.html',styleUrls: ['stepper-overview-example.css'],})导出类 StepperOverviewExample 实现 OnInit {isLinear = false;表单组:表单组；形式:FormArray；构造函数(私有_formBuilder:FormBuilder){}ngOnInit() {this.formGroup = this._formBuilder.group({形式:this._formBuilder.array([this.init()])})this.addItem();}在里面(){返回 this._formBuilder.group({cont :new FormControl('', [Validators.required]),})}新增项目(){this.form = this.formGroup.get('form') as FormArray;this.form.push(this.init());}}

Stackblitz

I am using angular material in my project. I want to add extra stepper item(mat-step) on every click of addItem button.

I created a plunker here. https://stackblitz.com/edit/angular-enmq1z?file=app%2Fstepper-overview-example.ts

Can anyone help me with this?

Thanks in advance.

解决方案

I would use FormArray along with FormGroup

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>

TS Code:

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

这篇关于角度材料步进器在每次点击时动态添加新的步骤项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！