JSFiddle - React, Tailwind, and code Playground

by armyofda12mnkeys

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-messages.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <form name="questionform">
        
        
            <div class="question-text">{{currentquestion.question_code}}. {{currentquestion.question_text}}</div>
            
            <ul>
              <li ng-repeat="choice in currentquestion.choices">
                  <input
                    type="checkbox"
                    ng-model="choice.selected"
                    ng-required="!somethingSelectedInTheGroup(currentquestion.required, currentquestion.choices)"
                    ng-click="currentquestion.custom_touched = true;"
                    name="{{currentquestion.question_code}}"
                    id="{{currentquestion.question_code}}_{{choice.option_value}}"										
                    value="{{choice.option_value}}"
                  /> {{choice.orig_option_txt}}

              </li> 
            </ul>
        
        
            <div ng-if="currentquestion.custom_touched && questionform[currentquestion.question_code].$invalid" ng-messages="questionform[currentquestion.question_code].$error" class="error-messages">
              <div ng-message="required">This field is required.</div>
            </div>
            <br/>$touched(not working): {{questionform[currentquestion.question_code].$touched}}
            <br/>$custom_touched: {{currentquestion2.custom_touched}}
            <br/>$dirty: {{questionform.$dirty}}
            <br/>$invalid: {{questionform[currentquestion.question_code].$invalid}}
            <br/>$error: {{questionform[currentquestion.question_code].$error}}
        
        
        
          <br/><br/><br/>
          <div class="question-text">{{currentquestion2.question_code}}. {{currentquestion2.question_text}}</div>
            
            <ul>
             ...

CSS

.question-text {font-weight: bold; }
.error-messages { color: red; }

JavaScript

var myApp = angular.module('myApp',['ngMessages']);


myApp.controller("MyCtrl", ['$scope',
  function($scope) {
  
  

    $scope.currentquestion = 
    {
         question_code: 'QS1',          
         question_text: 'What diseases do you have? ',
         required: true,         
         custom_touched: false,
         choices: [
             {option_value: 'OPTION1_DIA', orig_option_txt: 'Diabetes' },
             {option_value: 'OPTION2_CAN', orig_option_txt: 'Cancer' },
             {option_value: 'OPTION3_HIV', orig_option_txt: 'HIV' },
             {option_value: 'OPTION4_CRO', orig_option_txt: 'Crohns' },
             {option_value: 'OPTION5_NA', orig_option_txt: 'None of the Above' }
         ]
    };
    
    $scope.currentquestion2 = 
    {
         question_code: 'QS2',          
         question_text: 'What diseases does your spouse have? ',
         required: true,
         custom_touched: false,
         choices: [
             {option_value: 'OPTION1_DIA', orig_option_txt: 'Diabetes' },
             {option_value: 'OPTION2_CAN', orig_option_txt: 'Cancer' },
             {option_value: 'OPTION3_HIV', orig_option_txt: 'HIV' },
             {option_value: 'OPTION4_CRO', orig_option_txt: 'Crohns' },
             {option_value: 'OPTION5_NA', orig_option_txt: 'None of the Above' }
         ]
    };
    

  $scope.somethingSelectedInTheGroup = function (is_required, choices) {
  	if(is_required) {
      for(var i = 0; i < choices.length; i++) {
      	var choice = choices [i];
        if(choice.selected) {
        	return true;
        }
      }
      
      return false;
    } else {
    	return false;
    }
  }

        
}]);