Skip to content

Commit 5d09d55

Browse files
khoadnguyenkhoadnguyen
authored
Merge pull request #121 from SoftStackFactory/65-wizard-validation-erro-message
65 wizard-validation-error-message
2 parents 59004dd + 37f9e88 commit 5d09d55

3 files changed

Lines changed: 616 additions & 139 deletions

File tree

‎src/pages/wizard/wizard.html‎

Lines changed: 220 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@
2020
<button ion-button [disabled]='nextButton' (click)="next()" id="end">Next</button>
2121
</div>
2222

23-
<ion-slides (ionSlideDidChange)="slideChanged()" pager>
23+
<ion-slides (ionSlideWillChange)="slideChanged()" pager>
2424

25-
<ion-slide class="demo-slide">
25+
<ion-slide class="demo-slide">
2626
<div class='top-simple'>
2727
<ion-list class="simple-header" >
2828
<ion-list-header>
2929
<h1 class="h1">Welcome Austin!!</h1>
3030
</ion-list-header>
31-
<p class="h2">InTranshition is an app designed for Veterans to transition into the civial environment.
31+
<p class="h2">InTransition is an app designed for Veterans to transition into the civil environment.
3232
This wizard will guide you through the app.<br><br>
3333
<strong> Scroll to the right to begin.</strong>
3434
</p>
@@ -98,81 +98,276 @@ <h1 class="h1">Questionnaire 1/3</h1>
9898
<p class='h2'>Tell us about yourself</p>
9999
</ion-list>
100100

101-
<form [formGroup]="todo" (ngSubmit)="logForm()" (ionChange)="formChanged">
102-
<ion-card class="card-size">
101+
<form [formGroup]="firstForm" (ngSubmit)="logForm()" (ionChange)="formChanged()">
102+
103+
<ion-card [class.invalid]="!branchValid && (branchTouched || submitIntent)" class="card-size">
103104
<ion-item-group>
104105
<ion-item-divider class='q-group' color="light">
105-
Select your Branch of Service
106+
Select your military branch
106107
</ion-item-divider>
107108
<ion-item class="">
108-
<span class='question'>{{branchDisplay}}</span>
109+
<span class='question'>{{branchValue}}</span>
109110
<a class="select" (click)="showRadioBranch()">Select</a>
110111
</ion-item>
112+
<ion-item no-lines *ngIf="!branchValid && (branchTouched || submitIntent)" >
113+
<p class="invalid-text">Enter an option</p>
114+
</ion-item>
111115
</ion-item-group>
112116
</ion-card>
113117

114-
<ion-card>
118+
<ion-card [class.invalid]="!vetValid && (vetTouched || submitIntent)">
115119
<ion-item-group>
116120
<ion-item-divider class='q-group' color="light">
117-
Are you an active member or a veteran?
121+
Are you an active member or a veteran?
118122
</ion-item-divider>
119123
<ion-item class="">
120-
<span class='question'>{{vetDisplay}}</span>
124+
<span class='question'>{{vetValue}}</span>
121125
<a class="select" (click)="showVetOptions()">Select</a>
122126
</ion-item>
127+
<ion-item no-lines *ngIf="!vetValid && (vetTouched || submitIntent)" >
128+
<p class="invalid-text">Enter an option</p>
129+
</ion-item>
123130
</ion-item-group>
124131
</ion-card>
125132

126-
<ion-card *ngIf="vetSelection">
133+
<ion-card [class.invalid]="!firstForm.controls.vetQuestionName.valid && (firstForm.controls.vetQuestionName.touched ||submitIntent)" *ngIf="vetValid">
127134
<ion-item-group>
128135
<ion-item-divider class='q-group' color="light">
129-
{{vetQuestion}}
136+
{{SeparationQuestion}}
130137
</ion-item-divider>
131138
<ion-item class="q-wrapper">
132139
<ion-datetime
140+
#vetQuestionName
133141
type="date"
134-
formControlName="VetQuestionName"
142+
formControlName="vetQuestionName"
135143
class='date'
136-
displayFormat="MM/DD/YYYY"
144+
displayFormat="MM/YYYY"
137145
>
138146
</ion-datetime>
139-
<ion-label ><a class="select">Select</a></ion-label>
147+
<ion-label ><a class="select" >Select</a></ion-label>
148+
</ion-item>
149+
<ion-item class="input" no-lines *ngIf="!firstForm.controls.vetQuestionName.valid && (firstForm.controls.vetQuestionName.touched || submitIntent)">
150+
<p class="invalid-text">Enter a date</p>
140151
</ion-item>
141152
</ion-item-group>
142153
</ion-card>
143154

144-
<ion-card>
155+
<ion-card [class.invalid]="!disabilityValid && disabilityTouched">
145156
<ion-item-group>
146157
<ion-item-divider class='q-group' color="light">
147158
Do you have any service disability?
148159
</ion-item-divider>
149160
<ion-item>
150-
<span class='question'>{{disabilityDisplay}}</span>
151-
<a class="select" #disabilityValue (click)="showRadioDisability()">Select</a>
161+
<span class='question'>{{disabilityQValue}}</span>
162+
<a class="select" #disabilityValue (click)="showRadioDisability()"> Select </a>
163+
</ion-item>
164+
<ion-item no-lines *ngIf="!disabilityValid && (disabilityTouched || submitIntent)" >
165+
<p class="invalid-text">Enter an option</p>
152166
</ion-item>
153167
</ion-item-group>
154168
</ion-card>
155169

156-
<ion-card *ngIf="hasDisability">
170+
<ion-card [class.invalid]="!firstForm.controls.percentQuestionName.valid && (firstForm.controls.percentQuestionName.dirty || submitIntent)" *ngIf="disabilityQValue == 'Yes'">
157171
<ion-item-group>
158172
<ion-item-divider class='q-group' color="light">
159-
What Percentage?
173+
What is your assigned disability rating (Percent)?
160174
</ion-item-divider>
161175
<ion-item>
162176
<ion-input
177+
class="input"
163178
type="number"
164179
placeholder='Input Answer here..'
165-
formControlName="PercentageQuestionName"
166-
[required]="disabilityRequired"
180+
formControlName="percentQuestionName"
167181
>
168182
</ion-input>
169183
</ion-item>
184+
<ion-item class="input" *ngIf="!firstForm.controls.percentQuestionName.valid && (firstForm.controls.percentQuestionName.dirty || submitIntent)">
185+
<p class="invalid-text" invalid-text>Enter a valid percent number from 1-100 </p>
186+
</ion-item>
187+
</ion-item-group>
188+
</ion-card>
189+
190+
<button ion-button type="submit" (click)="onSubmitOne()" >submit</button><br>
191+
</form>
192+
193+
</div>
194+
</ion-slide>
195+
196+
<ion-slide class='quest-slide'>
197+
<div class='top-question'>
198+
<ion-list class="question-header" >
199+
<ion-list-header class='inner-question-header' >
200+
<h1 class="h1">Questionnaire 2/3</h1>
201+
</ion-list-header>
202+
<p class='h2'>Continue </p>
203+
</ion-list>
204+
205+
<form [formGroup]="secondForm" (ngSubmit)="logFormTwo()" (ionChange)="formChanged()">
206+
207+
<ion-card [class.invalid]="employedInvalid && employedTouched">
208+
<ion-item-group>
209+
<ion-item-divider class='q-group' color="light">
210+
Are you employed or unemployed?
211+
</ion-item-divider>
212+
<ion-item class="">
213+
<span class='question'>{{employedAnswer}}</span>
214+
<a class="select" (click)="showEmployedRadio()"> Select</a>
215+
</ion-item>
216+
<ion-item *ngIf="employedInvalid && employedTouched" >
217+
<p class="invalid-text">Enter an option</p>
218+
</ion-item>
170219
</ion-item-group>
171220
</ion-card>
172-
<button ion-button type="submit" [disabled]="!todo.valid" >submit</button>
221+
222+
<ion-card [class.invalid]="!secondForm.controls.lastEmployed.valid && (secondForm.controls.lastEmployed.touched)" *ngIf="employedAnswer == 'Unemployed'">
223+
<ion-item-group>
224+
<ion-item-divider class='q-group' color="light">
225+
When were you last employed?
226+
</ion-item-divider>
227+
<ion-item class="q-wrapper">
228+
<ion-datetime
229+
type="date"
230+
class='date'
231+
displayFormat="MM/YYYY"
232+
formControlName="lastEmployed"
233+
>
234+
</ion-datetime>
235+
<ion-label ><a class="select">Select</a></ion-label>
236+
</ion-item>
237+
<ion-item class="input" *ngIf="!secondForm.controls.lastEmployed.valid && (secondForm.controls.lastEmployed.touched)">
238+
<p class="invalid-text" invalid-text>Enter a date</p>
239+
</ion-item>
240+
</ion-item-group>
241+
</ion-card>
242+
243+
<ion-card [class.invalid]="!marriedValid && marriedTouched">
244+
<ion-item-group>
245+
<ion-item-divider class='q-group' color="light">
246+
Are you married?
247+
</ion-item-divider>
248+
<ion-item class="">
249+
<span class='question'>{{marriedAnswer}}</span>
250+
<a class="select" (click)='showMarriedAlert()'>Select</a>
251+
</ion-item>
252+
<ion-item *ngIf="!marriedValid && marriedTouched" >
253+
<p class="invalid-text">Enter an option</p>
254+
</ion-item>
255+
</ion-item-group>
256+
</ion-card>
257+
<!-- <button ion-button type="submit" [disabled]="" (click)="onSubmit()" >submit</button> -->
173258
</form>
174259
</div>
175260
</ion-slide>
261+
<ion-slide class= 'quest-slide'>
262+
<div class='top-question'>
263+
<ion-list class="question-header" >
264+
<ion-list-header class='inner-question-header' >
265+
<h1 class="h1">Questionnaire 3/3</h1>
266+
</ion-list-header>
267+
<p class='h2'>Continue</p>
268+
</ion-list>
269+
270+
<form [formGroup]="thirdForm" (ngSubmit)="logFormTwo()" (ionChange)="formChanged()">
271+
272+
<ion-card [class.invalid]="!thirdForm.controls.rank.valid && (thirdForm.controls.rank.dirty)">
273+
<ion-item-group>
274+
<ion-item-divider class='q-group' color="light">
275+
What is your military rank?
276+
</ion-item-divider>
277+
<ion-item>
278+
<ion-input
279+
type="text"
280+
placeholder='Input Answer here..'
281+
formControlName="rank"
282+
>
283+
</ion-input>
284+
</ion-item>
285+
<ion-item class="input" *ngIf="!thirdForm.controls.rank.valid && (thirdForm.controls.rank.dirty)">
286+
<p class="invalid-text" invalid-text>Enter a valid answer</p>
287+
</ion-item>
288+
</ion-item-group>
289+
</ion-card>
290+
291+
<ion-card [class.invalid]="!thirdForm.controls.MOS.valid && (thirdForm.controls.MOS.dirty)" >
292+
<ion-item-group>
293+
<ion-item-divider class='q-group' color="light">
294+
What is your MOS/NEC?
295+
</ion-item-divider>
296+
<ion-item>
297+
<ion-input
298+
type="number"
299+
placeholder='Input Answer here..'
300+
formControlName="MOS"
301+
>
302+
</ion-input>
303+
</ion-item>
304+
<ion-item class="input" *ngIf="!thirdForm.controls.MOS.valid && (thirdForm.controls.MOS.dirty)">
305+
<p class="invalid-text" invalid-text>Enter a valid number. Only 9 digits</p>
306+
</ion-item>
307+
</ion-item-group>
308+
</ion-card>
309+
310+
<ion-card [class.invalid]="!thirdForm.controls.answer.valid && (thirdForm.controls.answer.dirty)">
311+
<ion-item-group>
312+
<ion-item-divider class='q-group' color="light">
313+
Choose an answer
314+
</ion-item-divider>
315+
<ion-item>
316+
<ion-label>Gender</ion-label>
317+
<ion-select
318+
formControlName="answer">
319+
<ion-option value="f">Female</ion-option>
320+
<ion-option value="m">Male</ion-option>
321+
</ion-select>
322+
</ion-item>
323+
<ion-item class="input" *ngIf="!thirdForm.controls.answer.valid && (thirdForm.controls.answer.dirty)">
324+
<p class="invalid-text" invalid-text>Enter a valid answer</p>
325+
</ion-item>
326+
</ion-item-group>
327+
</ion-card>
328+
<button ion-button (click)= "onSelect()"> Button</button>
329+
330+
331+
332+
</form>
333+
</div>
334+
335+
</ion-slide>
336+
337+
<ion-slide class='quest-slide'>
338+
<div class='top-question'>
339+
<ion-list class="question-header" >
340+
<ion-list-header class='inner-question-header' >
341+
<h1 class="h1">Questionnaire 4</h1>
342+
</ion-list-header>
343+
<p class='h2'>Tell us about yourself</p>
344+
</ion-list>
345+
346+
<!-- <form [formGroup]="forthForm" (ngSubmit)="logFormTwo()" (ionChange)="forthForm()">
347+
<ion-card [class.invalid]="!forthForm.controls.answer.valid && (forthForm.controls.answer.dirty)">
348+
<ion-item-group>
349+
<ion-item-divider class='q-group' color="light">
350+
Choose an answer
351+
</ion-item-divider>
352+
<ion-item>
353+
<ion-input
354+
type="text"
355+
placeholder='Input Answer here..'
356+
formControlName="answer"
357+
>
358+
</ion-input>
359+
</ion-item>
360+
<ion-item class="input" *ngIf="!forthForm.controls.answer.valid && (forthForm.controls.answer.dirty)">
361+
<p class="invalid-text" invalid-text>Enter a valid answer</p>
362+
</ion-item>
363+
</ion-item-group>
364+
</ion-card>
365+
</form> -->
366+
367+
368+
369+
</div>
370+
</ion-slide>
176371

177372
<ion-slide class="demo-slide">
178373
<div class='top-simple'>
@@ -182,7 +377,7 @@ <h1 id="end-wizard-h" class="h1">Thank you for using the Wizard</h1>
182377
</ion-list-header>
183378
<p class="h2">You may begin by taking the self assesment.</p>
184379
</ion-list >
185-
</div>
380+
186381
<!-- <div class='top-simple'>
187382
<div class="top-message">
188383
<h1>Thanks for using the Wizard</h1>
@@ -193,6 +388,7 @@ <h1>Thanks for using the Wizard</h1>
193388
<button class='button1' ion-button>Dashboard</button>
194389
<button class='button1' ion-button>Take Assesment</button>
195390
</div>
391+
</div>
196392
</ion-slide>
197393

198394
</ion-slides>

‎src/pages/wizard/wizard.scss‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
page-wizard {
2-
// ion-slide {
3-
2+
3+
// ion-slides {
4+
45
// }
6+
ion-slide{
7+
background-color: white;
8+
9+
}
10+
.slide-zoom{
11+
height:100%;
12+
}
513
.demo-slide {
14+
// display: flex;
615
align-items: flex-start;
716
}
817

9-
.quest-slide {
18+
.quest-slide{
19+
height: 100%;
20+
overflow-y: scroll;
1021
align-items: flex-start;
1122
}
1223

@@ -16,7 +27,7 @@ page-wizard {
1627
width: 100%;
1728
height: 4.5vw;
1829
min-height: 40px;
19-
z-index: 2px;
30+
z-index: 3;
2031
//margin-top: .5px;
2132
}
2233
.start {
@@ -209,7 +220,8 @@ page-wizard {
209220

210221
@media screen and (orientation:landscape) {
211222

212-
.demo-slide {
223+
.demo-slide .slide-zoom {
224+
display: flex;
213225
align-items: center;
214226
}
215227
.top-simple {
@@ -273,5 +285,13 @@ page-wizard {
273285
}
274286

275287
}
288+
.invalid {
289+
border: 1px solid #ea6153;
290+
}
291+
292+
.invalid-text {
293+
font-size: 20px;
294+
color: #ea6153;
295+
}
276296

277297
}

0 commit comments

Comments
 (0)