Merge "Prevent "enter" from triggering submit action on modal forms"

horizon/static/framework/widgets/form/modal-form.controller.js

@@ -51,8 +51,12 @@
     ctrl.submitIcon = context.submitIcon;
     ctrl.cancel = cancel;
 
-    function submit() {
-      return $uibModalInstance.close(context);
+    function submit($event, schemaForm) {
+      $event.preventDefault();
+      $event.stopPropagation();
+      if (!schemaForm.$invalid) {
+        return $uibModalInstance.close(context);
+      }
     }
 
     function cancel() {

horizon/static/framework/widgets/form/modal-form.controller.spec.js

@@ -17,7 +17,8 @@
   'use strict';
 
   describe('modal-form controller', function () {
-    var ctrl, modalInstance, context;
+    var ctrl, modalInstance, context,
+      mockEvent, mockSchemaInvalidForm, mockSchemaValidForm;
 
     beforeEach(module('horizon.framework.widgets.form'));
 
@@ -38,6 +39,12 @@
           $uibModalInstance: modalInstance,
           context: context
         });
+      mockEvent = {
+        stopPropagation: angular.noop,
+        preventDefault: angular.noop
+      };
+      mockSchemaInvalidForm = { '$invalid': true };
+      mockSchemaValidForm = { '$invalid': false };
     }));
 
     it('sets formTitle on scope', function() {
@@ -58,10 +65,16 @@
 
     it('calls modalInstance close on submit', function() {
       spyOn(modalInstance, 'close');
-      ctrl.submit();
+      ctrl.submit(mockEvent, mockSchemaValidForm);
       expect(modalInstance.close.calls.count()).toBe(1);
     });
 
+    it('does not call close on submit if form is invalid', function() {
+      spyOn(modalInstance, 'close');
+      ctrl.submit(mockEvent, mockSchemaInvalidForm);
+      expect(modalInstance.close.calls.count()).toBe(0);
+    });
+
     it('calls modalInstance dismiss on cancel', function() {
       spyOn(modalInstance, 'dismiss');
       ctrl.cancel();

horizon/static/framework/widgets/form/modal-form.html

@@ -13,7 +13,8 @@
         sf-form="ctrl.form"
         sf-model="ctrl.model"
         sf-options="{ validateOnRender: true,
-                      pristine: { errors: false, success: false } }">
+                      pristine: { errors: false, success: false } }"
+        ng-submit="ctrl.submit($event, schemaForm)">
   </form>
 </div>
 
@@ -44,7 +45,7 @@
   <button type="button"
           class="btn btn-primary"
           ng-disabled="schemaForm.$invalid"
-          ng-click="ctrl.submit()">
+          ng-click="ctrl.submit($event, schemaForm)">
     <span class="fa fa-{$::ctrl.submitIcon$}"></span>
     {$::ctrl.submitText$}
   </button>