finished #2 questionnaire 2

Author: iamalx

src/pages/wizard/wizard.html

@@ -163,7 +163,7 @@ <h1 class="h1">Questionnaire 1/3</h1>
           </ion-item>
           <ion-item  no-lines *ngIf="!disabilityValid && disabilityTouched" >
               <p class="invalid-text">Enter an option</p>
-            </ion-item>
+          </ion-item>
         </ion-item-group>
       </ion-card>
 
@@ -178,7 +178,6 @@ <h1 class="h1">Questionnaire 1/3</h1>
             type="number"
             placeholder='Input Answer here..'
             formControlName="percentQuestionName"
-           
             >
           </ion-input>
           </ion-item>
@@ -205,7 +204,7 @@ <h1 class="h1">Questionnaire 2/3</h1>
 
       <form [formGroup]="secondForm" (ngSubmit)="logFormTwo()" (ionChange)="formChanged()">
 
-      <ion-card>
+      <ion-card [class.invalid]="employedInvalid && employedTouched">
         <ion-item-group>
           <ion-item-divider class='q-group' color="light">
               Are you employed or unemployed?
@@ -214,10 +213,13 @@ <h1 class="h1">Questionnaire 2/3</h1>
             <span class='question'>{{employedAnswer}}</span>
             <a class="select" (click)="showEmployedRadio()"> Select</a>
           </ion-item>
+          <ion-item *ngIf="employedInvalid && employedTouched" >
+              <p class="invalid-text">Enter an option</p>
+          </ion-item>
         </ion-item-group>
       </ion-card>
 
-      <ion-card  [class.invalid]="!secondForm.controls.lastEmployed.valid && (secondForm.controls.lastEmployed.touched)" *ngIf="showUnemployed">
+      <ion-card  [class.invalid]="!secondForm.controls.lastEmployed.valid && (secondForm.controls.lastEmployed.touched)" *ngIf="employedAnswer == 'Unemployed'">
         <ion-item-group>
           <ion-item-divider class='q-group' color="light">
            When were you last employed?
@@ -238,7 +240,7 @@ <h1 class="h1">Questionnaire 2/3</h1>
         </ion-item-group>
       </ion-card>    
 
-      <ion-card>
+      <ion-card  [class.invalid]="!marriedValid && marriedTouched">
         <ion-item-group>
           <ion-item-divider class='q-group' color="light">
               Are you married?
@@ -247,6 +249,9 @@ <h1 class="h1">Questionnaire 2/3</h1>
             <span class='question'>{{marriedAnswer}}</span>
             <a class="select" (click)='showMarriedAlert()'>Select</a>
           </ion-item>
+          <ion-item *ngIf="!marriedValid && marriedTouched" >
+              <p class="invalid-text">Enter an option</p>
+          </ion-item>
         </ion-item-group>
       </ion-card>     
       <!-- <button ion-button type="submit" [disabled]="" (click)="onSubmit()" >submit</button> -->

src/pages/wizard/wizard.ts

@@ -337,29 +337,29 @@ export class WizardPage implements OnInit {
   disabilityTouched: boolean= false;
 
   showRadioDisability() {
-    let alert = this.alertCtrl.create(
+    let disabilityAlert = this.alertCtrl.create(
       {
         title:"Dissability", 
         cssClass: "branchRadio", 
         message: "Select One"
       })
 
-    alert.addInput({
+      disabilityAlert.addInput({
       type: 'radio',
       label: 'Yes',
       value: 'Yes',
       checked: false
     });
 
-    alert.addInput({
+    disabilityAlert.addInput({
       type: 'radio',
       label: 'No',
       value: 'No',
       checked: false
     });
 
-    alert.addButton('Cancel');
-    alert.addButton({
+    disabilityAlert.addButton('Cancel');
+    disabilityAlert.addButton({
       text: 'OK',
       handler: data => {
         const percentQuestion = this.firstForm.get('percentQuestionName')
@@ -376,16 +376,19 @@ export class WizardPage implements OnInit {
         }
         percentQuestion.updateValueAndValidity()
         this.disabilityQValue = data; 
-        this.disabilityTouched = true;
-      }
+      }      
     });
-
-    alert.present(); 
+    disabilityAlert.didLeave
+      .subscribe( _ => {
+        this.disabilityTouched = true;
+      })
+    disabilityAlert.present(); 
   }
 
   //questionnaire ######2222222
   // show employed question
-  showUnemployed: boolean = false;
+  employedInvalid: boolean = true;
+  employedTouched: boolean = false;
   employedAnswer: string= "";
   showEmployedRadio() {
     let alert = this.alertCtrl.create({
@@ -410,70 +413,72 @@ export class WizardPage implements OnInit {
     alert.addButton({
       text: 'OK',
       handler: data => {
-        console.log("OK", data);
-        this.employedAnswer = data;
-        console.log(this.secondForm.valid, "2ndformValid?")
-        console.log(this.secondForm, "2ndform")
         const lastEmployed = this.secondForm.get("lastEmployed")
         if(data == "Unemployed"){
-          this.showUnemployed = true;
+          this.employedInvalid = false;
           lastEmployed.setValidators(Validators.required)
-          console.log("if -setValidators")
         } else if(data === "Employed") {
-          this.showUnemployed = false;
+          this.employedInvalid = false;
           lastEmployed.clearValidators()
-          console.log("else -clearValidators", data)
-        } else if (data === undefined) {
-          this.showUnemployed = false;
+        } else {
+          this.employedInvalid = true;
           lastEmployed.clearValidators()
-          console.log("else -clearValidators", data)
         }
+        this.employedAnswer = data;
         lastEmployed.updateValueAndValidity()
-        console.log("handler: updateValue")
       } 
     });
+    alert.didLeave
+    .subscribe( _ => {
+      this.employedTouched = true;
+    })
+
     alert.present();
   }
 
   //question 2) Married
   marriedAnswer: string = '';
+  marriedValid: boolean = false;
+  marriedTouched: boolean = false;
   showMarriedAlert() {
-    let alert = this.alertCtrl.create(
+    let marriedAlert = this.alertCtrl.create(
       {
         title:"Married Status", 
         cssClass: "branchRadio", 
         message: "Select One"
       })
 
-    alert.addInput({
+      marriedAlert.addInput({
       type: 'radio',
       label: 'Yes',
       value: 'Yes',
       checked: false
     });
 
-    alert.addInput({
+    marriedAlert.addInput({
       type: 'radio',
       label: 'No',
       value: 'No',
       checked: false
     });
 
-    alert.addButton('Cancel');
-    alert.addButton({
+    marriedAlert.addButton('Cancel');
+    marriedAlert.addButton({
       text: 'OK',
       handler: data => {
-        console.log("OK", data);
         this.marriedAnswer = data;
-        if(data == "Yes") {
-          
-        } else if(data == "No"){
-         
+        if(data) {
+          this.marriedValid = true; 
+        }else {
+          this.marriedValid = false; 
         }
       }
     });
-
-    alert.present(); 
+    marriedAlert.didLeave
+    .subscribe( _ => {
+      this.marriedTouched = true;
+    })
+    marriedAlert.present(); 
   }
 
   logFormTwo(){