-
Notifications
You must be signed in to change notification settings - Fork 3
Wizard
The wizard is divided into two main section: the demo slides and the form or questionnaire slides. The wizard page is wrapped by the slide component by ionic called ion-slides. More information on ion-slides can be found on ionic's documentation: https://ionicframework.com/docs/api/components/slides/Slides/. The form validation was accomplished using FormBuilder from angular forms. This builder allows the form validation logic to be on the wizard class.
The main functionality of the wizard slide is the ability to swipe to a 'different' page by using ionic's ion-slides component.
First we use ViewChild to get the functionality of our <ion-slides>
element by using @ViewChild(Slides) slides: Slides;
and importing ViewChild
from angular/core
. This sets "slide" as a global variable that we can use throughout our class.
The event trigger called ionSlideWillChange()
which detects the slide change and invokes a function, allows one to lock or unlock the current slide with the help of the real.index
property.
The property slides.realIndex
returns the slide number the user is on, when set inside the function being
called by ionSlideWillChange()
. Together the event trigger and the property allows for one to set the logic to lock or unlock the slides depending on the slide the user is on.
To lock or unlock the slides, ion-slides gives us two properties that expect a boolean: slides.lockSwipeToNext(true||false)
and slides.lockSwipeToPrev(true||false)
Slides number 0-5 allows the user to move freely to the previous or next slide by setting the argument as false
:
When the user reaches slide number 6 and 9, the argument for slides.lockSwipeToPrev()
is set as true, restricting the user to move to the previous slide.
For the questionnaire slides, slides number 6-8, the user can only move forward when the form for that respective page is valid. slides.lockSwipeToNext()
is set as false.
This observable is used with our formGroup name and is called when the form turns valid or invalid.:
this.firstForm.statusChanges
.subscribe(val => {
})
Inside here we have our logic that checks if our form is valid, and if true it makes the property for slides.lockSwipeToNext()
false to enable the user to move to the next slide.
FormBuilder allows us to have interactive forms to create conditional validation, and it provides a handset of properties to test our form.
We must first import import { Validators, FormBuilder, FormGroup, FormControl} from '@angular/forms';
in our page class, and set these in our constructors to use it in our class.
Next we must have all of our <input></input>
elements inside our <form></form>
element. In addition, we have to give our form element a FromGroup
property name and give every input a different FormControlName
property name, such as:
<form [formGroup]="firstForm">
and
<ion-input formControlName="percentQuestion"></ion-input>
Finally to set it up in our logic, we must set the formGroup as a global variable to use it in out class:
private firstForm : FormGroup;
.
This allows us to use the firstForm
variable and set up validators for every FormControl
:
firstFormFunct() {
this.firstForm = this.formBuilder.group({
branch: ['', Validators.compose([Validators.required])],
vetOrActive: ['', Validators.compose([Validators.required])],
separationDate: ['', Validators.compose([Validators.required])],
disability: ['', Validators.compose([Validators.required])],
percentQuestion: ["", ]
});
In our wizard questionnaire, question "What is your assigned disability?" is required only if the user answers "yes" for "Do you have a service disability" and question "When were you last employed" if answered "unemployed?" for "Are you employed and unemployed?"
We use this observable to perform a function whenever the value changes and include our logic inside it.
this.secondForm.controls.employment.valueChanges
.subscribe( data => {
}
Whenever the user enters a value that determines the next question to be required we set validators on the formControl name using the property <formControlName>.setValidators(Validators.compose([ Validators.required]))
.
When we want to clear validators we use <formControlName>.clearValidators
.
And at the end we have to update our form by using <formControlName>.updateValueAndValidity()