Angular 16 Multi Step Reactive Form Example Tutorial

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