Multi Step Form In Angular.

What Is Multi Step Form?

Multi step Form is a long form broken into multi steps. It is not a multi forms rather than multi steps in a single long form. The reason behind it, short form is more easy to complete than long form. It is more comfortable for users to fill the form step by step because their mind should process fewer fields at a time.

Now a days multi step form is more popular than regular form , as it is more user friendly rather than regular form. The multi step form is the best solution when there are too many fields in a from. So breaking large form into multiple step is more user friendly.

It is used to make long form, such as checkout page , registration form etc.,less intimidating and daunting.

Why Use Multi step Form?

1.It is more comfortable than regular form.2.It is easy to fill short form than long form.3.It can increase engagement.4.It reduce psychological friction.

Below are the steps to implement multi step form in Angular.

Step 1: Create New App.

ng new angular-multistep

Step 2: Import Module.

In this step, just import FormsModule, ReactiveFormsModule, and BrowserAnimationsModule module for creating this example. Open src/app/app.module.ts and add below lines.

import { BrowserModule } from ‘@angular/platform-browser’;
import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’;

@NgModule({
declarations: [
AppComponent
],
imports:[
BrowserModule,
ReactiveFormsModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 : Update ts file.

Add below code in src/app/app.component.ts

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

@Component({
selector: ‘app-multistep’,
templateUrl: ‘./multistep.component.html’,
styleUrls: [‘./multistep.component.css’]
})
export class MultistepComponent implements OnInit {

personalDetails!: FormGroup;
addressDetails!: FormGroup;
educationalDetails!: FormGroup;
personal_step = false;
address_step = false;
education_step = false;
step = 1;

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {

this.personalDetails = this.formBuilder.group({
name: [”, Validators.required],
email: [”, Validators.required],
phone: [”,Validators.required]
});

this.addressDetails = this.formBuilder.group({
city: [”, Validators.required],
address: [”, Validators.required],
pincode: [”,Validators.required]
});

this.educationalDetails = this.formBuilder.group({
highest_qualification: [”, Validators.required],
university: [”, Validators.required],
total_marks: [”,Validators.required]
});
}

get personal() { return this.personalDetails.controls; }
get education() { return this.educationalDetails.controls; }
get address() { return this.addressDetails.controls; }

next(){

if(this.step==1){
this.personal_step = true;
if (this.personalDetails.invalid) { return }
this.step++
}

if(this.step==2){
this.address_step = true;
if (this.addressDetails.invalid) { return }
this.step++;
}

}

previous(){

this.step–
if(this.step==1){
this.personal_step = false;
}
if(this.step==2){
this.education_step = false;
}
}

submit(){

if(this.step==3){
this.education_step = true;
if (this.educationalDetails.invalid) { return }
}
}
}

Step 4 : Update html file.

Add below code in src/app/app.component.html.

<div class=”row”>
<div class=”col-md-12 col-md-offset-3″>
<form [formGroup]=”personalDetails” id=”msform”>
<!– progressbar –>
<ul id=”progressbar”>
<li [ngClass]=”step>=1 ? ‘active ‘ : ‘inactive'”>Personal Details</li>
<li [ngClass]=”step>=2 ? ‘active’ : ‘inactive'”>Social Profiles</li>
<li [ngClass]=”step==3 ? ‘active’ : ‘inactive'”>Account Setup</li>
</ul>
<!– fieldsets –>

<fieldset *ngIf=”step == 1″ >
<h2 class=”fs-title”>Personal Details</h2>
<input type=”text” formControlName=”name” [ngClass]=”{ ‘is-invalid’: personal_step && personal.name.errors }” placeholder=”Full Name”/>
<div *ngIf=”personal_step && personalDetails.controls.name.errors”>
<div *ngIf=”personal.name.errors?.required”>Name is required</div>
</div>
<input type=”text” formControlName=”email” name=”email” placeholder=”Email”/>
<div *ngIf=”personal_step && personalDetails.controls.email.errors”>
<div *ngIf=”personal.email.errors?.required”>Email is required</div>
</div>
<input type=”text” formControlName=”phone” name=”phone” placeholder=”Phone”/>
<div *ngIf=”personal_step && personalDetails.controls.phone.errors”>
<div *ngIf=”personal.phone.errors?.required”>Phone is required</div>
</div>
<input (click)=”next()” type=”button” name=”next” class=”next action-button” value=”Next”/>
</fieldset>
</form>
<form [formGroup]=”addressDetails” id=”msform”>
<fieldset *ngIf=”step == 2″ >
<h2 class=”fs-title”>Address Details</h2>
<input type=”text” formControlName=”city” placeholder=”City”/>
<div *ngIf=”address_step && addressDetails.controls.city.errors”>
<div *ngIf=”address.city.errors?.required”>City is required</div>
</div>
<textarea rows=”5″ cols=”5″ formControlName=”address” placeholder=”address”></textarea>
<div *ngIf=”address_step && addressDetails.controls.address.errors”>
<div *ngIf=”address.address.errors?.required”>Address is required</div>
</div>
<input type=”text” formControlName=”pincode” placeholder=”Pincode”/>
<div *ngIf=”address_step && addressDetails.controls.pincode.errors”>
<div *ngIf=”address.pincode.errors?.required”>Pincode is required</div>
</div>
<input (click)=”previous()” type=”button” name=”previous” class=”previous action-button-previous” value=”Previous”/>
<input (click)=”next()” type=”button” name=”next” class=”next action-button” value=”Next”/>
</fieldset>
</form>
<form [formGroup]=”addressDetails” id=”msform”>
<fieldset *ngIf=”step == 3″>
<h2 class=”fs-title”>Educational Details</h2>
<input type=”text” formControlName=”highest_qualification” placeholder=”Highest Qualification”/>
<div *ngIf=”education_step && educationalDetails.controls.highest_qualification.errors”>
<div *ngIf=”education.highest_qualification.errors?.required”>Highest qualification is required</div>
</div>
<input type=”text” formControlName=”university” placeholder=”University”/>
<div *ngIf=”education_step && educationalDetails.controls.university.errors”>
<div *ngIf=”education.university.errors?.required”>University is required</div>
</div>
<input type=”text” formControlName=”total_marks” placeholder=”Total Marks”/>
<div *ngIf=”education_step && educationalDetails.controls.total_marks.errors”>
<div *ngIf=”education.total_marks.errors?.required”>Total marks is required</div>
</div>
<input (click)=”previous()” type=”button” name=”previous” class=”previous action-button-previous” value=”Previous”/>
<input (click)=”submit()”type=”submit” name=”submit” class=”submit action-button” value=”Submit”/>
</fieldset>
</form>

</div>
</div>

Step 3 : Add below code in app-routing.module.ts file.

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { MultistepComponent} from ‘./multistep/multistep.component’

const routes: Routes = [
path:’multistep’,component:MultistepComponent}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

That’s all about multi step form in Angular. After writing above code open http://localhost:4200/multistep.

Reactive Form Validation In Angular.

The post Multi Step Form In Angular. appeared first on PHPFOREVER.

Permanent link to this post here