1925 support for questionnaire validation and field requirements

src/app/pages/questions/components/question/matrix-radio-input/matrix-radio-input.component.html

@@ -1,4 +1,4 @@
-<ion-radio-group (ionChange)="onInputChange($event)">
+<ion-radio-group (ionChange)="onInputChange($event)" [value]="selectedValue">
   <ion-row>
     <ion-col *ngFor="let item of items; let i = index">
       <ion-item color="none" lines="none" class="item-md">

src/app/pages/questions/components/question/matrix-radio-input/matrix-radio-input.component.ts

@@ -26,8 +26,10 @@ export class MatrixRadioInputComponent implements OnInit, OnChanges {
   currentlyShown: boolean
   @Input()
   previouslyShown: boolean
+  @Input()
+  value: number
 
-  value: number = null
+  selectedValue: number = null
   uniqueID: number = uniqueID++
   name = `radio-input-${this.uniqueID}`
   items: Item[] = Array()
@@ -40,10 +42,12 @@ export class MatrixRadioInputComponent implements OnInit, OnChanges {
         value: item.code
       })
     })
+    // Initialize selectedValue from the input value to restore previous selections
+    this.selectedValue = this.value || null
   }
 
   ngOnChanges() {
-    if (this.currentlyShown && !this.previouslyShown)
+    if (this.currentlyShown && !this.previouslyShown && !this.selectedValue)
       setTimeout(() => this.onInputChange(this.responses[0].code), 100)
   }
 

src/app/pages/questions/components/question/question.component.html

@@ -124,8 +124,10 @@ <h2 dir="auto" [innerHTML]="sanitizedFieldLabel"></h2>
         *ngSwitchCase="'text'"
         (valueChange)="emitAnswer($event)"
         (keyboardEvent)="onKeyboardEvent($event)"
-        [type]="question.text_validation_type_or_show_slider_number"
+        (showWarningChange)="onWarningFieldChange($event)"
+        [validationType]="question.text_validation_type_or_show_slider_number"
         [currentlyShown]="currentlyShown"
+        [canSubmitOnEnter]="canGoNextOnEnter"
       ></text-input>
 
       <radio-input
@@ -148,9 +150,9 @@ <h2 dir="auto" [innerHTML]="sanitizedFieldLabel"></h2>
         [responses]="question.select_choices_or_calculations"
         [currentlyShown]="currentlyShown"
         [previouslyShown]="previouslyShown"
+        [value]="value"
         (valueChange)="emitAnswer($event)"
-      >
-      </matrix-radio-input>
+      ></matrix-radio-input>
 
       <web-input
         *ngSwitchCase="'web'"

src/app/pages/questions/components/question/question.component.ts

@@ -22,15 +22,16 @@ import {
   Response
 } from '../../../../shared/models/question'
 import { Task } from '../../../../shared/models/task'
+import { AnswerService } from '../../services/answer.service'
 
 @Component({
   selector: 'question',
   templateUrl: 'question.component.html',
   styleUrls: ['question.component.scss']
 })
 export class QuestionComponent implements OnInit, OnChanges {
-  @ViewChild('content', { static: false }) content
-  @ViewChild('input', { read: ElementRef, static: false }) inputEl
+  @ViewChild('content', { static: false }) content: ElementRef
+  @ViewChild('input', { read: ElementRef, static: false }) inputEl: ElementRef
 
   @Input()
   question: Question
@@ -46,10 +47,14 @@ export class QuestionComponent implements OnInit, OnChanges {
   isNextAutomatic: boolean // Automatically slide to next upon answer
   @Input()
   isMatrix = false
+  @Input()
+  canGoNextOnEnter = false
   @Output()
   answer: EventEmitter<Answer> = new EventEmitter<Answer>()
   @Output()
   nextAction: EventEmitter<any> = new EventEmitter<any>()
+  @Output()
+  warningState: EventEmitter<boolean> = new EventEmitter<boolean>()
 
   sanitizedSectionHeader = ''
   sanitizedFieldLabel = ''
@@ -103,7 +108,10 @@ export class QuestionComponent implements OnInit, OnChanges {
     QuestionType.checkbox
   ])
 
-  constructor(private sanitizer: DomSanitizer) {
+  constructor(
+    private sanitizer: DomSanitizer,
+    private answerService: AnswerService
+  ) {
     this.value = null
   }
 
@@ -125,6 +133,9 @@ export class QuestionComponent implements OnInit, OnChanges {
     setTimeout(() => {
       this.showScrollButton = this.isScrollbarVisible()
     }, 900)
+
+    // Initialize value from stored answer
+    this.value = this.answerService.answers[this.question.field_name] || null
   }
 
   ngOnChanges() {
@@ -143,7 +154,9 @@ export class QuestionComponent implements OnInit, OnChanges {
   }
 
   private updateSanitizedHtml() {
-    this.sanitizedSectionHeader = this.sanitizeHtml(this.question?.section_header)
+    this.sanitizedSectionHeader = this.sanitizeHtml(
+      this.question?.section_header
+    )
     this.sanitizedFieldLabel = this.sanitizeHtml(this.question?.field_label)
   }
 
@@ -215,7 +228,7 @@ export class QuestionComponent implements OnInit, OnChanges {
     return (
       this.SCROLLBAR_VISIBLE_SET.has(this.question.field_type) &&
       this.inputEl.nativeElement.scrollHeight >
-      this.inputEl.nativeElement.clientHeight
+        this.inputEl.nativeElement.clientHeight
     )
   }
 
@@ -225,7 +238,7 @@ export class QuestionComponent implements OnInit, OnChanges {
       this.showScrollButton &&
       event &&
       event.target.scrollTop >=
-      (event.target.scrollHeight - event.target.clientHeight) * 0.1
+        (event.target.scrollHeight - event.target.clientHeight) * 0.1
     ) {
       this.showScrollButton = false
     }
@@ -240,6 +253,10 @@ export class QuestionComponent implements OnInit, OnChanges {
     })
   }
 
+  onWarningFieldChange(showWarning: boolean) {
+    this.warningState.emit(showWarning)
+  }
+
   onAudioRecordStart(start: boolean) {
     if (start) this.nextAction.emit(NextButtonEventType.DISABLE)
     else this.nextAction.emit(NextButtonEventType.ENABLE)

src/app/pages/questions/components/question/text-input/text-input.component.html

@@ -5,6 +5,19 @@
   </ion-item>
 </ng-container>
 
+<ng-container *ngIf="showDateTimePicker && currentlyShown">
+  <ion-item (click)="openDatePicker()" color="none">
+    <ion-input [(ngModel)]="selectedDate"> </ion-input>
+    <ion-icon name="calendar" slot="end"></ion-icon>
+  </ion-item>
+  <wheel-selector
+    [values]="timePickerValues"
+    [selection]="defaultTimePickerValue"
+    [labels]="labels"
+    (onSelect)="emitAnswer($event)"
+  ></wheel-selector>
+</ng-container>
+
 <ng-container *ngIf="showTimePicker && currentlyShown">
   <wheel-selector
     [values]="timePickerValues"
@@ -24,9 +37,17 @@
 </ng-container>
 
 <ng-container *ngIf="showTextInput && currentlyShown">
+  <ion-label *ngIf="showWarningField">
+    {{
+      validationType === ValidationType.NUMBER
+        ? ('NUMBER_INPUT_WARNING' | translate)
+        : ('TEXT_INPUT_WARNING' | translate)
+    }}
+  </ion-label>
   <ion-item color="none" class="input">
     <ion-input
       type="text"
+      [inputmode]="inputModeType"
       enterkeyhint="next"
       placeholder="{{ 'PLACEHOLDER_TEXT_INPUT' | translate }}"
       [(ngModel)]="textValue"

src/app/pages/questions/components/question/text-input/text-input.component.ts

@@ -13,6 +13,10 @@ import * as moment from 'moment'
 
 import { LocalizationService } from '../../../../../core/services/misc/localization.service'
 import { KeyboardEventType } from '../../../../../shared/enums/events'
+import {
+  ValidationType,
+  InputModeType
+} from '../../../../../shared/models/question'
 
 @Component({
   selector: 'text-input',
@@ -26,14 +30,30 @@ export class TextInputComponent implements OnInit {
   valueChange: EventEmitter<string> = new EventEmitter<string>()
   @Output()
   keyboardEvent: EventEmitter<string> = new EventEmitter<string>()
-  @Input()
-  type: string
+  @Output()
+  showWarningChange: EventEmitter<boolean> = new EventEmitter<boolean>()
   @Input()
   currentlyShown: boolean
+  @Input()
+  validationType = ''
+  @Input()
+  requiredField = false
+  /**
+   * Controls whether Enter key submission is allowed.
+   * Set to true when all required questions are answered and current answer is valid.
+   * When false, pressing Enter will show a warning instead of proceeding to the next question.
+   */
+  @Input()
+  canSubmitOnEnter = false
+
+  ValidationType = ValidationType
+  InputModeType = InputModeType
 
   showDatePicker: boolean
+  showDateTimePicker = false
   showTimePicker: boolean
   showDurationPicker: boolean
+  showWarningField = false
   showTextInput = true
   showSeconds: boolean
 
@@ -54,28 +74,56 @@ export class TextInputComponent implements OnInit {
   }
   textValue = ''
   value = {}
+  inputModeType = 'text'
   DEFAULT_DATE_FORMAT = 'DD/MM/YYYY'
+  // Regex pattern to validate numeric input (only digits allowed)
+  DIGIT_PATTERN = /^\d*$/
+  DIGITAL_PATTERN = /^[\d]*$/
+  // Partial<Record<...>> allows only a subset of ValidationType keys without TypeScript complaining about missing entries
+  INPUT_MODE_MAP: Partial<Record<ValidationType, InputModeType>> = {
+    [ValidationType.NUMBER]: InputModeType.NUMBER,
+    [ValidationType.EMAIL]: InputModeType.EMAIL,
+    [ValidationType.PHONE]: InputModeType.PHONE
+  }
 
   constructor(
     private localization: LocalizationService,
     public modalCtrl: ModalController
-  ) { }
+  ) {}
 
   ngOnInit() {
-    if (this.type.length) {
-      this.showDatePicker = this.type.includes('date')
-      this.showTimePicker = this.type.includes('time')
-      this.showDurationPicker = this.type.includes('duration')
+    if (this.validationType.length) {
+      this.inputModeType =
+        this.INPUT_MODE_MAP[this.validationType as ValidationType] ||
+        InputModeType.TEXT
+
+      this.showDatePicker = [
+        ValidationType.DATE_DMY,
+        ValidationType.DATE_MDY,
+        ValidationType.DATE_YMD
+      ].includes(this.validationType as ValidationType)
+      this.showDateTimePicker = [
+        ValidationType.DATETIME_DMY,
+        ValidationType.DATETIME_MDY,
+        ValidationType.DATETIME_YMD
+      ].includes(this.validationType as ValidationType)
+      this.showTimePicker = this.validationType === ValidationType.TIME
+      this.showDurationPicker = this.validationType.includes(
+        ValidationType.DURATION
+      )
     }
     this.showTextInput =
-      !this.showDatePicker && !this.showTimePicker && !this.showDurationPicker
-    this.showSeconds = this.type.includes('second')
+      !this.showDatePicker &&
+      !this.showDateTimePicker &&
+      !this.showTimePicker &&
+      !this.showDurationPicker
+    this.showSeconds = this.validationType.includes(ValidationType.SECOND)
     this.initValues()
   }
 
   initValues() {
-    if (this.showDatePicker) this.initDates()
-    if (this.showTimePicker) this.initTime()
+    if (this.showDatePicker || this.showDateTimePicker) this.initDates()
+    if (this.showTimePicker || this.showDateTimePicker) this.initTime()
     if (this.showDurationPicker) this.initDuration()
   }
 
@@ -133,7 +181,9 @@ export class TextInputComponent implements OnInit {
   }
 
   datePickerObj: any = {}
-  selectedDate: string = this.localization.moment(Date.now()).format(this.DEFAULT_DATE_FORMAT)
+  selectedDate: string = this.localization
+    .moment(Date.now())
+    .format(this.DEFAULT_DATE_FORMAT)
 
   async openDatePicker() {
     const datePickerModal = await this.modalCtrl.create({
@@ -148,7 +198,9 @@ export class TextInputComponent implements OnInit {
 
     datePickerModal.onDidDismiss().then(data => {
       let date = moment(data.data.date, this.DEFAULT_DATE_FORMAT)
-      this.selectedDate = date.isValid() ? date.format(this.DEFAULT_DATE_FORMAT) : this.selectedDate
+      this.selectedDate = date.isValid()
+        ? date.format(this.DEFAULT_DATE_FORMAT)
+        : this.selectedDate
 
       this.defaultDatePickerValue = {
         year: date.format('YYYY'),
@@ -164,12 +216,45 @@ export class TextInputComponent implements OnInit {
     if (typeof value !== 'string') {
       this.value = Object.assign(this.value, value)
       this.valueChange.emit(JSON.stringify(this.value))
-    } else this.valueChange.emit(value)
+    } else {
+      this.inputValidation(value)
+      this.valueChange.emit(value)
+    }
+  }
+
+  inputValidation(value) {
+    if (
+      this.validationType === ValidationType.NUMBER &&
+      !this.DIGIT_PATTERN.test(value)
+    ) {
+      this.showWarningField = true
+    } else {
+      this.showWarningField = false
+    }
+    this.showWarningChange.emit(this.showWarningField)
   }
 
   async emitKeyboardEvent(value) {
     value = value.toLowerCase()
-    if (value == KeyboardEventType.ENTER) await Keyboard.hide()
+    const isEnter = value === KeyboardEventType.ENTER
+    const isInvalidNumber =
+      isEnter &&
+      this.validationType === ValidationType.NUMBER &&
+      !this.DIGIT_PATTERN.test(this.textValue)
+
+    if (isInvalidNumber) {
+      this.showWarningField = true
+    }
+
+    // Block Enter if canSubmitOnEnter is false OR if the number input is invalid
+    const shouldBlockEnter =
+      isEnter && (!this.canSubmitOnEnter || isInvalidNumber)
+
+    if (shouldBlockEnter) {
+      this.showWarningField = true
+      this.showWarningChange.emit(this.showWarningField)
+      return
+    }
 
     this.keyboardEvent.emit(value)
   }

src/app/pages/questions/containers/questions-page.component.html

@@ -32,8 +32,10 @@
                 [currentIndex]="currentQuestionGroupId"
                 [isSectionHeaderHidden]="j != currentQuestionIndices[0]"
                 [isMatrix]="item.value.length > 1"
+                [canGoNextOnEnter]="canGoNextOnEnter"
                 (answer)="onAnswer($event)"
                 (nextAction)="nextAction($event)"
+                (warningState)="handleWarningState($event)"
               ></question>
             </div>
           </swiper-slide>