← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18019: better interactiveness in validating inputs

 

------------------------------------------------------------
revno: 18019
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Fri 2015-01-16 13:24:19 +0100
message:
  better interactiveness in validating inputs
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/ec-custom-form.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment.html
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/angular/plugins/dhis2/services.js


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js	2015-01-15 15:29:08 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/scripts/controllers.js	2015-01-16 12:24:19 +0000
@@ -429,7 +429,7 @@
     };
     
     $scope.addEvent = function(addingAnotherEvent){                
-
+        
         //check for form validity
         $scope.outerForm.submitted = true;        
         if( $scope.outerForm.$invalid ){
@@ -773,22 +773,32 @@
     };
     
     $scope.isFormInvalid = function(){
+        
         if($scope.outerForm.submitted){
             return $scope.outerForm.$invalid;
         }
         
-        var errorMessages = ErrorMessageService.getErrorMessages();
-        
-        for(var k in errorMessages){
-            if( errorMessages.hasOwnProperty(k) && 
-                errorMessages[k] !== "" && 
-                errorMessages[k] !== $translate('required') &&
-                $scope.currentEvent[k]){
-                return true;
-            }
-        }
-        
-        return false;
+        if(!$scope.outerForm.$dirty){
+            return false;
+        }
+        
+        var formIsInvalid = false;
+        for(var k in $scope.outerForm.$error){            
+            if(angular.isObject($scope.outerForm.$error[k])){
+                
+                for(var i=0; i<$scope.outerForm.$error[k].length && !formIsInvalid; i++){
+                    if($scope.outerForm.$error[k][i].$dirty && $scope.outerForm.$error[k][i].$invalid){
+                        formIsInvalid = true;
+                    }
+                }
+            }
+            
+            if(formIsInvalid){
+                break;
+            }
+        }
+        
+        return formIsInvalid;
     };
     
     $scope.getErrorMessage = function(deId){

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html	2015-01-13 17:31:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/defaultForm.html	2015-01-16 12:24:19 +0000
@@ -34,7 +34,8 @@
                            name="eventDate"
                            input-field-id="eventDate"
                            style="width:99%;"/>
-                    <span ng-show="currentEvent.eventDate && outerForm.eventDate.$invalid || outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{getErrorMessage('eventDate')}}</span>
+                    <span ng-show="outerForm.eventDate.$invalid && outerForm.eventDate.$dirty || currentEvent.eventDate && outerForm.eventDate.$invalid || outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{getErrorMessage('eventDate')}}</span>
+                    <!--<span ng-show="outerForm.eventDate.$invalid && outerForm.eventDate.$dirty" class="required">{{'required' | translate}}</span>-->
                 </td>
             </tr>
             <tr ng-if="selectedProgramStage.captureCoordinates">
@@ -161,7 +162,7 @@
                                        input-field-id={{eventGridColumn.id}} />
                             </div>
                         </div>
-                        <span ng-show="currentEvent[eventGridColumn.id] && innerForm.foo.$invalid || outerForm.submitted && innerForm.foo.$invalid" class="required">{{getErrorMessage(eventGridColumn.id)}}</span>
+                        <span ng-show="innerForm.foo.$invalid && innerForm.foo.$dirty || currentEvent[eventGridColumn.id] && innerForm.foo.$invalid || outerForm.submitted && innerForm.foo.$invalid" class="required">{{getErrorMessage(eventGridColumn.id)}}</span>                        
                     </ng-form>                    
                 </td>
             </tr>        
@@ -204,7 +205,7 @@
                            name="eventDate" 
                            input-field-id='eventDate' 
                            style="width:99%;">
-                    <span ng-show="currentEvent.eventDate && outerForm.eventDate.$invalid || outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{getErrorMessage('eventDate') | translate}}</span>
+                    <span ng-show="outerForm.eventDate.$invalid && outerForm.eventDate.$dirty || currentEvent.eventDate && outerForm.eventDate.$invalid || outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{getErrorMessage('eventDate') | translate}}</span>
                 </td>
             </tr>
             <tr ng-if="selectedProgramStage.captureCoordinates">
@@ -344,7 +345,7 @@
                                                input-field-id={{de.dataElement.id}}/>
                                     </div>
                                 </div>
-                                <span ng-show="currentEvent[de.dataElement.id] && innerForm.foo.$invalid || outerForm.submitted && innerForm.foo.$invalid" class="required">{{getErrorMessage(de.dataElement.id)}}</span>
+                                <span ng-show="innerForm.foo.$invalid && innerForm.foo.$dirty  || outerForm.submitted && innerForm.foo.$invalid || currentEvent[de.dataElement.id] && innerForm.foo.$invalid" class="required">{{getErrorMessage(de.dataElement.id)}}</span>                                
                             </ng-form>                            
                         </td>
                     </tr>
@@ -392,6 +393,6 @@
         <button ng-click="showEventList(null)" class="button not-printable">{{'go_back'| translate}}</button>        
     </span>
     <span ng-if="isFormInvalid()" class="horizontal-spacing red">{{'form_invalid' | translate}}</span>
-    
+        
 </div>
 <!-- buttons for event registration / update ends -->

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/ec-custom-form.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/ec-custom-form.html	2015-01-13 17:31:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/views/ec-custom-form.html	2015-01-16 12:24:19 +0000
@@ -21,7 +21,7 @@
                    ng-required="true" 
                    input-field-id="eventDate"
                    name="eventDate"/>
-            <span ng-show="currentEvent.eventDate && outerForm.eventDate.$invalid || outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{getErrorMessage('eventDate')}}</span>
+            <span ng-show="outerForm.eventDate.$invalid && outerForm.eventDate.$dirty || currentEvent.eventDate && outerForm.eventDate.$invalid || outerForm.submitted && outerForm.eventDate.$invalid" class="required">{{getErrorMessage('eventDate')}}</span>
         </td>
     </tr>
     <tr ng-if="selectedProgramStage.captureCoordinates">

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html	2015-01-05 16:25:01 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/default-form.html	2015-01-16 12:24:19 +0000
@@ -25,7 +25,7 @@
                                    ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)'
                                    ng-model="currentEvent[prStDe.dataElement.id]" 
                                    ng-required={{prStDe.compulsory}}
-                                   ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                   ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                    ng-blur="saveDatavalue(prStDe)" 
                                    name="foo"/>
                             <span ng-show="dataEntryOuterForm.submitted && dataEntryInnerForm.foo.$invalid" class="error">{{'number_required'| translate}}</span>
@@ -37,7 +37,7 @@
                                         ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)'
                                         ng-model="currentEvent[prStDe.dataElement.id]" 
                                         ng-required={{prStDe.compulsory}} 
-                                        ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                        ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                         typeahead="option.name as option.name for option in optionSets[prStDe.dataElement.optionSet.id].options | filter:$viewValue | limitTo:20" 
                                         typeahead-open-on-focus 
                                         typeahead-editable="false"
@@ -51,7 +51,7 @@
                                             ng-class='getInputNotifcationClass(prStDe.dataElement.id,true)'
                                             name={{currentEvent[prStDe.dataElement.id]}}
                                             ng-required={{prStDe.compulsory}} 
-                                            ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                            ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                             ng-model="currentEvent[prStDe.dataElement.id]"
                                             ng-change="saveDatavalue(prStDe)" 
                                             value=""> {{'no_value' | translate}}<br>                                       
@@ -62,7 +62,7 @@
                                                 ng-class='getInputNotifcationClass(prStDe.dataElement.id,true)'
                                                 name={{currentEvent[prStDe.dataElement.id]}}
                                                 ng-required={{prStDe.compulsory}} 
-                                                ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                 ng-model="currentEvent[prStDe.dataElement.id]"
                                                 ng-change="saveDatavalue(prStDe)" 
                                                 value={{option.name}}> {{option.name}}
@@ -75,7 +75,7 @@
                                     ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)'
                                     ng-model="currentEvent[prStDe.dataElement.id]" 
                                     ng-required={{prStDe.compulsory}} 
-                                    ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                    ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                     ng-blur="saveDatavalue(prStDe)" 
                                     name="foo"/>
                             </div>
@@ -84,7 +84,7 @@
                             <select ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)'
                                     ng-model="currentEvent[prStDe.dataElement.id]" 
                                     ng-required={{prStDe.compulsory}} 
-                                    ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                    ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                     ng-change="saveDatavalue(prStDe)" 
                                     name="foo">
                                 <option value="">{{'please_select'| translate}}</option>                        
@@ -101,7 +101,7 @@
                                    ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)'
                                    ng-model="currentEvent[prStDe.dataElement.id]"
                                    ng-required={{prStDe.compulsory}}  
-                                   ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                   ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                    blur-or-change="saveDatavalue(prStDe)"
                                    name="foo"/>
                         </div>
@@ -110,7 +110,7 @@
                                    ng-class='getInputNotifcationClass(prStDe.dataElement.id,false)'
                                    ng-model="currentEvent[prStDe.dataElement.id]"                                                               
                                    ng-required={{prStDe.compulsory}} 
-                                   ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                   ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                    ng-change="saveDatavalue(prStDe)" 
                                    name="foo"/>
                         </div>
@@ -158,7 +158,7 @@
                                                    ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,false)'
                                                    ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]" 
                                                    ng-required={{prStDes[de.dataElement.id].compulsory}}
-                                                   ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                   ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                    ng-blur="saveDatavalue(prStDes[de.dataElement.id])" 
                                                    name="foo"/>
                                             <span ng-show="dataEntryOuterForm.submitted && dataEntryInnerForm.foo.$invalid" class="error">{{'number_required'| translate}}</span>
@@ -170,7 +170,7 @@
                                                         ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,false)'
                                                         ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]" 
                                                         ng-required={{prStDes[de.dataElement.id].compulsory}} 
-                                                        ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                        ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                         typeahead="option.name as option.name for option in optionSets[prStDes[de.dataElement.id].dataElement.optionSet.id].options | filter:$viewValue | limitTo:20" 
                                                         typeahead-open-on-focus 
                                                         typeahead-editable="false"
@@ -184,7 +184,7 @@
                                                             ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,true)'
                                                             name={{currentEvent[prStDes[de.dataElement.id].dataElement.id]}}
                                                             ng-required={{prStDes[de.dataElement.id].compulsory}} 
-                                                            ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                            ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                             ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]"
                                                             ng-change="saveDatavalue(prStDes[de.dataElement.id])" 
                                                             value=""> {{'no_value' | translate}}<br>                                       
@@ -195,7 +195,7 @@
                                                                 ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,true)'
                                                                 name={{currentEvent[prStDes[de.dataElement.id].dataElement.id]}}
                                                                 ng-required={{prStDes[de.dataElement.id].compulsory}} 
-                                                                ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                                ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                                 ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]"
                                                                 ng-change="saveDatavalue(prStDes[de.dataElement.id])" 
                                                                 value={{option.name}}> {{option.name}}
@@ -208,7 +208,7 @@
                                                     ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,false)'
                                                     ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]" 
                                                     ng-required={{prStDes[de.dataElement.id].compulsory}} 
-                                                    ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                    ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                     ng-blur="saveDatavalue(prStDes[de.dataElement.id])" 
                                                     name="foo"/>
                                             </div>
@@ -217,7 +217,7 @@
                                             <select ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,false)'
                                                     ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]" 
                                                     ng-required={{prStDes[de.dataElement.id].compulsory}} 
-                                                    ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                    ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                     ng-change="saveDatavalue(prStDes[de.dataElement.id])" 
                                                     name="foo">
                                                 <option value="">{{'please_select'| translate}}</option>                        
@@ -234,7 +234,7 @@
                                                    ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,false)'
                                                    ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]"
                                                    ng-required={{prStDes[de.dataElement.id].compulsory}}  
-                                                   ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                   ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                    blur-or-change="saveDatavalue(prStDes[de.dataElement.id])"
                                                    name="foo"/>
                                         </div>
@@ -243,7 +243,7 @@
                                                    ng-class='getInputNotifcationClass(prStDes[de.dataElement.id].dataElement.id,false)'
                                                    ng-model="currentEvent[prStDes[de.dataElement.id].dataElement.id]"                                                               
                                                    ng-required={{prStDes[de.dataElement.id].compulsory}} 
-                                                   ng-disabled="currentEvent.enrollmentStatus === 'COMPLETED'" 
+                                                   ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE'" 
                                                    ng-change="saveDatavalue(prStDes[de.dataElement.id])" 
                                                    name="foo"/>
                                         </div>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js	2015-01-14 10:02:36 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js	2015-01-16 12:24:19 +0000
@@ -108,7 +108,7 @@
                     if(!exists){
                         $scope.attributesForEnrollment.push(atts[i]);
                     }
-                }                
+                }
             });                
         }
         
@@ -122,10 +122,14 @@
        
         $scope.showEnrollmentDiv = !$scope.showEnrollmentDiv;
         
-        if($scope.showEnrollmentDiv){
-            
+        if($scope.showEnrollmentDiv){            
             $scope.showEnrollmentHistoryDiv = false;
-            $scope.selectedEnrollment = null;                        
+            
+            //load new enrollment details
+            $scope.selectedEnrollment = null;            
+            $scope.loadEnrollmentDetails($scope.selectedEnrollment);
+            
+            //check custom form for enrollment
             $scope.selectedProgram.hasCustomForm = false;
             $scope.registrationForm = '';
             TEFormService.getByProgram($scope.selectedProgram.id).then(function(teForm){

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment.html	2015-01-05 11:39:25 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment.html	2015-01-16 12:24:19 +0000
@@ -9,7 +9,7 @@
             | <a href ng-click="showNewEnrollment()" title="{{'new'| translate}}"><span ng-class="{'light-blue': !showEnrollmentDiv}">{{'new'| translate}}</span></a>
         </span>
         <span class="nav-pills" ng-show="terminatedEnrollments.length > 0 || completedEnrollments.length > 0">
-            | <a href ng-click="showEnrollmentHistory()" title="{{'history'| translate}}"><span ng-class="{'light-blue': !showEnrollmentHistoryDiv}">{{'history'| translate}}</span></a>
+            | <a href ng-click="showEnrollmentHistory()" title="{{'history'| translate}}"><span ng-class="{'light-blue': currentEnrollment === selectedEnrollment}">{{'history'| translate}}</span></a>
         </span>       
 
         <span class="pull-right">

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/angular/plugins/dhis2/services.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/angular/plugins/dhis2/services.js	2015-01-14 14:02:44 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/angular/plugins/dhis2/services.js	2015-01-16 12:24:19 +0000
@@ -223,7 +223,7 @@
                                             ' input-field-id=" ' + deId + '"' +
                                             ' ng-class="getInputNotifcationClass(prStDes.' + deId + '.dataElement.id,true)"' +
                                             ' ng-blur="saveDatavalue(prStDes.'+ deId + ')"' + 
-                                            ' ng-required="prStDes.' + deId + '.compulsory"> ';                                     
+                                            ' ng-required="{{prStDes.' + deId + '.compulsory}}"> ';                                     
                         }
                         if(programStageDataElements[deId].dataElement.type == "string"){
                             if(programStageDataElements[deId].dataElement.optionSet){
@@ -234,7 +234,7 @@
                                             ' ng-model="currentEvent.' + deId + '" ' +
                                             ' input-field-id=" ' + deId + '"' +
                                             ' ng-disabled="currentEvent[uid] == \'uid\'" ' +
-                                            ' ng-required="prStDes.' + deId + '.compulsory"' +
+                                            ' ng-required="{{prStDes.' + deId + '.compulsory}}"' +
                                             ' typeahead="option.name as option.name for option in optionSets.'+optionSetId+'.options | filter:$viewValue | limitTo:20"' +
                                             ' typeahead-editable="false" ' +
                                             ' d2-typeahead-validation ' +
@@ -264,7 +264,7 @@
                                             ' input-field-id=" ' + deId + '"' +
                                             ' ng-class="getInputNotifcationClass(prStDes.' + deId + '.dataElement.id,true)"' +
                                             ' ng-change="saveDatavalue(prStDes.'+ deId + ')"' + 
-                                            ' ng-required="prStDes.' + deId + '.compulsory">' + 
+                                            ' ng-required="{{prStDes.' + deId + '.compulsory}}">' + 
                                             '<option value="">{{\'please_select\'| translate}}</option>' +
                                             '<option value="false">{{\'no\'| translate}}</option>' + 
                                             '<option value="true">{{\'yes\'| translate}}</option>' +
@@ -281,7 +281,7 @@
                                             ' max-date="' + maxDate + '"' + '\'' +
                                             ' ng-class="getInputNotifcationClass(prStDes.' + deId + '.dataElement.id,true)"' +
                                             ' blur-or-change="saveDatavalue(prStDes.'+ deId + ')"' + 
-                                            ' ng-required="prStDes.' + deId + '.compulsory"> '; 
+                                            ' ng-required="{{prStDes.' + deId + '.compulsory}}"> '; 
                         }
                         if(programStageDataElements[deId].dataElement.type == "trueOnly"){
                             newInputField = '<input type="checkbox" ' +
@@ -291,10 +291,10 @@
                                             ' input-field-id=" ' + deId + '"' +
                                             ' ng-class="getInputNotifcationClass(prStDes.' + deId + '.dataElement.id,true)"' +
                                             ' ng-change="saveDatavalue(prStDes.'+ deId + ')"' +
-                                            ' ng-required="prStDes.' + deId + '.compulsory"> ';
+                                            ' ng-required="{{prStDes.' + deId + '.compulsory}}"> ';
                         }
 						
-						newInputField = newInputField + '<span ng-show="outerForm.submitted && outerForm.'+ deId +'.$invalid || currentEvent.' + deId + ' && outerForm.'+ deId +'.$invalid" class="required">{{getErrorMessage(prStDes.' + deId + '.dataElement.id)}}</span>';                                        
+						newInputField = newInputField + ' <span ng-show="(outerForm.'+ deId +'.$dirty && outerForm.'+ deId +'.$invalid) || (outerForm.submitted && outerForm.'+ deId +'.$invalid) || (currentEvent.' + deId + ' && outerForm.' + deId + '.$invalid)" class="required">{{getErrorMessage(prStDes.' + deId + '.dataElement.id)}}</span> ';                                        
 						
                         htmlCode = htmlCode.replace(inputField, newInputField);
                     }