In this tutorial, you will learn how to create a multi-step reactive form in Angular 16 using We’ll use Angular’s built-in FormGroup and FormBuilder for creating and managing the form.
Angular 16 multiple steps form, allowing users to navigate through each step using a Next and Previous button.
Angular 16 Multi Step Reactive Form Example Tutorial
Stesp to create multi step form wizard with next and previous button in angular 16 forms:
- Step 1 – Create a New Angular Application
- Step 2 – Install Material Design Library
- Step 3 – Import Modules in Module.ts File
- Step 4 – Create Multi Step Form Wizard
- Step 5 – Use the Multi-Step Form Component
- Step 6 – Start the Development Server
Step 1 – Create a New Angular Application
If you haven’t already installed Angular CLI, you can do so using the following command:
ng new my-new-app
Step 2 – Install Material Design Library
Once you have created angular project into your system. Then you need to install material design.
So, You can do it by using the following command:
ng add @angular/material
Step 3 – Import Modules in Module.ts File
Once you have done the above given steps, you need to visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatStepperModule} from '@angular/material/stepper';
import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatListModule} from '@angular/material/list';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatStepperModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
MatListModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4 – Create Multi Step Form Wizard
Next, you need to implement multi step form wizard in the angular apps. So, visit src/app/ and app.component.html and update the following code into it:
<h1>Angular Multi Step Form Example - Tutsmake.com</h1>
<h3>Create Product</h3>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Basic Details</ng-template>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name" required>
</mat-form-field>
<br/>
<mat-form-field>
<mat-label>Description</mat-label>
<textarea matInput placeholder="Description" formControlName="description" required>
</textarea>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Amount & Stock</ng-template>
<mat-form-field>
<mat-label>Amount</mat-label>
<input matInput placeholder="Amount" formControlName="amount" required>
</mat-form-field>
<br/>
<mat-form-field>
<mat-label>Stock</mat-label>
<input matInput placeholder="Stock" formControlName="stock" required>
</mat-form-field>
<br/>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<mat-list>
<mat-list-item> <strong>Name:</strong> {{ this.firstFormGroup.value.name }}</mat-list-item>
<mat-list-item> <strong>Description:</strong> {{ this.firstFormGroup.value.description }}</mat-list-item>
<mat-list-item> <strong>Amount:</strong> {{ this.secondFormGroup.value.amount }}</mat-list-item>
<mat-list-item> <strong>Stock:</strong> {{ this.secondFormGroup.value.stock }}</mat-list-item>
</mat-list>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
<button mat-button (click)="submit()">Submit</button>
</div>
</mat-step>
</mat-horizontal-stepper>
Step 5 – Use the Multi-Step Form Component
In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'newMat';
isLinear = true;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
name: ['', Validators.required],
description: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
amount: ['', Validators.required],
stock: ['', Validators.required]
});
}
submit(){
console.log(this.firstFormGroup.value);
console.log(this.secondFormGroup.value);
}
}
Step 6 – Start the Development Server
Run your Angular application to see the multi-step reactive form in action:
ng serve
Visit http://localhost:4200 in your web browser to use the multi-step form.
Conclusion
That’s it! You’ve created a multi-step reactive form in Angular 16. You can further enhance it with validation, error handling, and additional form fields as needed.
Recommended Angular Tutorials
Discover more from Jassweb
Subscribe to get the latest posts sent to your email.
