Creating multilevel registration form:

Here we learn “Multilevel registration form in ionic“, for this ionic introduce a very useful component sliders, by using sliders we design multilevel form

In this we use form builder, validators and slider.

if you want to know more about validators please visit this.

Output Example –

Follow these steps for completing multilevel form –

So let’s start the design.

Step1: 

Adding the register page in app.module.ts because we are going to make multilevel form for registration.

Step2:

Now we start the design part of multilevel form open register.html file

<ion-header>
 
<ion-navbar color="primary">
 
<ion-title align="center">Register</ion-title>
 
</ion-navbar>
 
</ion-header>
 
<ion-content padding>
 
<ion-slides #signupSlider pager="false">
 
<ion-slide>
 
<ion-list no-lines text-wrap>
 
<form [formGroup]="slideOneForm">
 
<ion-card class="all_card_style">
 
<ion-card-header class="color_blue">
 
<b>Personal Detail</b>
 
</ion-card-header>
 
<hr class="hr_line">
 
<ion-card-content>
 
<ion-item class="input_box_class">
 
<ion-label class="all_label_class" fixed>FirstName</ion-label>
 
<ion-input formControlName="first_name" type="text" [class.invalid]="!slideOneForm.controls.first_name.valid"></ion-input>
 
</ion-item>
 
<ion-item *ngIf="!slideOneForm.controls.first_name.valid  && (slideOneForm.controls.first_name.dirty || submitAttempt)">
 
<p class="p">*FirstName is required</p>
 
</ion-item>
 
<ion-item class="input_box_class">
 
<ion-label class="all_label_class" fixed>Last Name</ion-label>
 
<ion-input formControlName="last_name" type="text" [class.invalid]="!slideOneForm.controls.last_name.valid && (slideOneForm.controls.last_name.dirty || submitAttempt)"></ion-input>
 
</ion-item>
 
<ion-item *ngIf="!slideOneForm.controls.last_name.valid  && (slideOneForm.controls.last_name.dirty || submitAttempt)">
 
<p class="p">*Last Name is required</p>
 
</ion-item>
 
<ion-item class="input_box_class">
 
<ion-label class="all_label_class" fixed>Mobile Number</ion-label>
 
<ion-input type="number" inputmode="numeric" formControlName="Mobile" [class.invalid]="!slideOneForm.controls.Mobile.valid && (slideOneForm.controls.Mobile.dirty || submitAttempt)"></ion-input>
 
</ion-item>
 
<ion-item *ngIf="!slideOneForm.controls.Mobile.valid  && (slideOneForm.controls.Mobile.dirty || submitAttempt)">
 
<p class="p">*Mobile Number is required</p>
 
</ion-item>
 
<ion-item class="input_box_class">
 
<ion-label class="all_label_class" fixed>Date Of Birth</ion-label>
 
<ion-datetime max="{{maxDate}}" class="ft-15" formControlName="DOB" [(ngModel)]="myDate" [class.invalid]="!slideOneForm.controls.DOB.valid && (slideOneForm.controls.DOB.dirty || submitAttempt)"></ion-datetime>
 
</ion-item>
 
<ion-item *ngIf="!slideOneForm.controls.DOB.valid  && (slideOneForm.controls.DOB.dirty || submitAttempt)">
 
<p class="p">*Date Of Birth is required</p>
 
</ion-item>
 
<ion-item class="all_label_class" class="input_box_class">
 
<ion-label fixed>Email Address</ion-label>
 
<ion-input type="Email" formControlName="Email" [class.invalid]="!slideOneForm.controls.Email.valid && (slideOneForm.controls.Email.dirty || submitAttempt)"></ion-input>
 
</ion-item>
 
<ion-item *ngIf="!slideOneForm.controls.Email.valid  && (slideOneForm.controls.Email.dirty || submitAttempt)">
 
<p class="p">*Email Address is required</p>
 
</ion-item>
 
<ion-item class="all_label_class" class="input_box_class">
 
<ion-label fixed>Password</ion-label>
 
<ion-input type="Password" value="" formControlName="Password" [class.invalid]="!slideOneForm.controls.Password.valid && (slideOneForm.controls.Password.dirty || submitAttempt)"></ion-input>
 
</ion-item>
 
<ion-item *ngIf="!slideOneForm.controls.Password.valid  && (slideOneForm.controls.Password.dirty || submitAttempt)">
 
<p class="p" text-wrap>*Password is required</p>
 
</ion-item>
 
</ion-card-content>
 
<button ion-button full (click)="valid()" class="all_btn_reg" [disabled]="!slideOneForm.valid">Next</button>
 
</ion-card>
 
</form>
 
</ion-list>
 
</ion-slide>
 
<ion-slide>
 
<form [formGroup]="slideTwoForm">
 
<ion-card class="all_card_style">
 
<ion-card-header class="color_blue">
 
<b>Qualification</b>
 
</ion-card-header>
 
<hr class="hr_line">
 
<ion-list>
 
<ion-item>
 
<ion-label class="all_label_class">Highest Qualification</ion-label>
 
</ion-item>
 
<ion-item class="input_box_class dropdown-style">
 
<ion-select [(ngModel)]="highest_qualification" cancelText="Schließen" okText="Ok" class="select_class myCustomSelect" multiple="true" formControlName="preferred">
 
<ion-label>Highest Qualification</ion-label>
 
<ion-option *ngFor="let qual of qualification; let i=index" value="{{qual.id}}">{{qual.title}}</ion-option>
 
</ion-select>
 
</ion-item>
 
<ion-item *ngIf="!slideTwoForm.controls.preferred.valid  && (slideTwoForm.controls.preferred.dirty || submitAttempt)">
 
<p class="p">*Highest Qualification is required</p>
 
</ion-item>
 
<ion-item text-wrap>
 
<ion-label class="all_label_class">Graduated Year</ion-label>
 
</ion-item>
 
<ion-item>
 
<ion-range min="1975" max="2018" [(ngModel)]="saturation1" color="primary" pin="true" step="1"  formControlName="graduated_year"></ion-range>
 
</ion-item>
 
<ion-grid>
 
<ion-row>
 
<ion-col col-6>
 
<button ion-button full class="all_btn_reg btn_next" (click)="prev()">Zurück</button>
 
</ion-col>
 
<ion-col col-6>
 
<button ion-button full class="all_btn_reg btn_prev" (click)="next()" id="next" [disabled]="!slideTwoForm.valid">Weiter</button>
 
</ion-col>
 
</ion-row>
 
</ion-grid>
 
</ion-list>
 
</ion-card>
 
</form>
 
</ion-slide>
 
<ion-slide>
 
<ion-card class="all_card_style">
 
<ion-list no-lines>
 
<form [formGroup]="slideThreeForm">
 
<ion-card-header class="color_blue">
 
<b>Technical Skills</b>
 
</ion-card-header><hr class="hr_line">
 
<ion-card-content>
 
<ion-list text-wrap>
 
<ion-item class="input_box_class">
 
<ion-select cancelText="Schließen" okText="ok" [ngModel]="software_experience_model" class="select_class myCustomSelect" multiple="true" formControlName="software_experience">
 
<ion-label>Software Knowledge</ion-label>
 
<ion-option value="Ms-office">Ms-office</ion-option>
 
<ion-option value="Ms-office">Ms-office</ion-option>
 
</ion-select>
 
</ion-item>
 
</ion-list>
 
</ion-card-content>
 
</form>
 
<ion-row>
 
<ion-col col-6>
 
<button ion-button full class="all_btn_reg btn_prev" (click)="prev()">Prev</button>
 
</ion-col>
 
<ion-col col-6>
 
<button ion-button full class="all_btn_reg btn_next btn_save" (click)="save(slideOneForm,slideTwoForm,slideThreeForm)" [disabled]="!slideThreeForm.valid >Create Account</button>
 
</ion-col>
 
</ion-row>
 
</ion-list>
 
</ion-card>
 
</ion-slide>
 
</ion-slides>
 
</ion-content>

Step3: 

Now we start the designig part of multilevel form, open the file where you want to integrate the code, here i am open register.ts file

import {NavController, NavParams, ToastController, Platform, Events} from 'ionic-angular';
import {Component, ElementRef, NgZone} from '@angular/core';
import {AlertController, LoadingController, ModalController} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup, FormControl, FormArray} from '@angular/forms';
import {Http} from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import {ViewChild} from '@angular/core';
 
@Component({
selector: 'page-register',
templateUrl: register'.html'
})
 
export class RegisterPage {
firstname:any;
lastname:any;
Mobile:any;
password:any;
DOB:any;
fatchdata:any;
graduated_year:any;
 
@ViewChild('signupSlider') signupSlider:any;
 slideOneForm:FormGroup;
 slideTwoForm:FormGroup;
 slideThreeForm:FormGroup;
 submitAttempt:boolean = false;
 saturation1:any;
 
constructor(public navCtrl:NavController, public navParams:NavParams, public formBuilder:FormBuilder, private http:Http, public loadingCtrl:LoadingController, public alertCtrl:AlertController) {
 
this.slideOneForm = formBuilder.group({
 first_name: ['', Validators.compose([Validators.maxLength(30), 
 Validators.pattern('[a-zA-Z ]*'), Validators.required])],
 last_name: ['', Validators.compose([Validators.maxLength(30), 
 Validators.pattern('[a-zA-Z ]*'), Validators.required])],
 Mobile: ['',Validators.required],
 DOB: ['', Validators.required],
 Email: ['', Validators.compose([Validators.required, 
 Validators.email])],
 Password: ['', Validators.compose([Validators.minLength(8), 
 Validators.required])],
});
 
this.slideTwoForm = formBuilder.group({
  highest_qualification: ['', Validators.required],
  graduated_year: ['', Validators.required],
});
 
this.slideThreeForm = formBuilder.group({
 software_experience: ['', Validators.required],
 });
}
 
ngAfterViewInit() {
 this.signupSlider.autoHeight = true;
}
 
next() {
 this.signupSlider.slideNext();
}
 
prev() {
 this.signupSlider.slidePrev();
}
 
save(slideOneForm, slideTwoForm, slideThreeForm) {
 let loading = this.loadingCtrl.create({
 spinner: "ios",
});
 
loading.present();
 
var data_l = {
first_name: slideOneForm.value.first_name,
last_name: slideOneForm.value.last_name,
mobile_phone: slideOneForm.value.Mobile,
email_address: slideOneForm.value.Email,
password: slideOneForm.value.Password,
highest_qualification: slideTwoForm.value.highest_qualification,
graduated_year: slideTwoForm.value.graduated_year,
software_experience: slideThreeForm.value.software_experience,
};
 
let api_data='https://Domain name/api/1/user/register;
 this.http.post(data_l,api_data).subscribe(
 data => {
 this.fatchdata = JSON.parse(data['_body']);
 if (this.fatchdata['status'] == 200) {
 loading.dismiss();
 let alert = this.alertCtrl.create({
 title: 'Register Successfully',
 message: this.fatchdata['message'],
 buttons: [{text: 'Ok',role: 'ok',handler: () => {
  this.navCtrl.setRoot(successPage);
 }
}]
});
alert.present();
}
else {
loading.dismiss();
let alert = this.alertCtrl.create({
title: 'Register Fail',
message: this.fatchdata['message'],
buttons: [{text: 'Ok',role: 'ok',handler: () => {} }]
});
 alert.present();
}
}, error => {
console.log("Oooops!", error);
});
}}}

Why i choose ionic –

I’m a big fan of ionic with angular, because it is very easy to implement complicated concepts and designs, in above example i am explain you in detail how to create a very simple radio box checked.

So we complete the tutorial which is “Multilevel registration form in ionic“.

You can find my post on medium click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.