Add validation to addTestBatch

Validation is limited - does not highlight the select box when
validation fails, since mg-class cannot be used currently with
ui-select - see angular-ui/ui-select#277

Author: danfuterman

app/scripts/controllers/testing.js

@@ -104,18 +104,25 @@ angular.module('bsis')
     $scope.getOpenTestBatches();
     $scope.getTestBatchFormFields();
 
-    $scope.addTestBatch = function (donationBatches){
+    $scope.addTestBatch = function (donationBatches, valid){
+      if (valid){
 
-      TestingService.addTestBatch(donationBatches, function(response){
-        if (response === true){
-          $scope.selectedDonationBatches = {};
-          $scope.getOpenTestBatches();
-          $scope.getTestBatchFormFields();
-        }
-        else{
-          // TODO: handle case where response == false
-        }
-      });
+        TestingService.addTestBatch(donationBatches, function(response){
+          if (response === true){
+            $scope.selectedDonationBatches = {};
+            $scope.getOpenTestBatches();
+            $scope.getTestBatchFormFields();
+            $scope.submitted = '';
+          }
+          else{
+            // TODO: handle case where response == false
+          }
+        });
+      }
+      else{
+        $scope.submitted = true;
+        console.log("FORM NOT VALID");
+      }
     };
 
     $scope.testBatchTableParams = new ngTableParams({

app/views/testing/manageTestBatch.html

@@ -46,12 +46,12 @@ <h4>New Test Batch</h4>
     <p><em>There are no current donations to test</em></p>
   </div>
   <div ng-switch-default>
-    <form class="form-horizontal col-sm-12" role="form" ng-submit="addTestBatch(selectedDonationBatches.ids)">
+    <form name="addTestBatchForm" novalidate class="form-horizontal col-sm-12" role="form" ng-submit="addTestBatch(selectedDonationBatches.ids, addTestBatchForm.$valid)">
       <div class="form-group">
         <label for="name" class="col-sm-2 control-label">Donation Batches</label>
         <div class="row col-sm-10">
           <div class="form-inline" style="padding-left:5px;">
-            <ui-select multiple ng-model="selectedDonationBatches.ids" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
+            <ui-select name="donationBatches" required multiple ng-model="selectedDonationBatches.ids" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" >
               <ui-select-match placeholder="Select:">{{$item.collectionCenter.name}} ({{$item.createdDate}})</ui-select-match>
               <ui-select-choices repeat="donationBatch.id as donationBatch in donationBatches | filter:$select.search">
                 <div ng-bind-html="donationBatch.collectionCenter.name"></div>
@@ -61,14 +61,22 @@ <h4>New Test Batch</h4>
                 </small>
               </ui-select-choices>
             </ui-select>
+            <div>
+            <small class="error" 
+              ng-show="
+                (addTestBatchForm.donationBatches.$invalid && (addTestBatchForm.donationBatches.$dirty || submitted))
+              ">
+              Select one or more donation batches
+            </small>
+          </div>
           </div>
         </div>
       </div>
 
       <div class="form-group"> 
         <div class="col-sm-offset-2 col-sm-4">
           <button class="btn btn-primary" type="submit">Add Test Batch</button>
-          <button class="btn btn-primary" type="button" ng-click="clear()">Clear</button>
+          <button class="btn btn-primary" type="button" ng-click="clearForm(addTestBatchForm); clear()">Clear</button>
         </div>
       </div>