angular material stepper add new step items dynamically on every click
12,845
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());
}
}
Related videos on Youtube
Author by
Anji
My Self anji, Frontend Developer. Currently working with Capillary Technologies, Banglore.
Updated on September 16, 2022Comments
-
Anji over 1 year
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.
-
Katherine over 3 yearsI used this with only slight modification to "let customerGroup of formGroup.controls.form.controls;" replaced with my own array. This worked really well.
-
Prashant Pimpale over 3 years@Katherine glad it helped you!