feat(forms): generate ng-submit-valid / ng-submit-invalid CSS classes…

… upon form submission
dart-archive · Feb 14, 2014 · 4bf9447 · 4bf9447
1 parent f34e0b3
commit 4bf9447
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/lib/directive/ng_control.dart b/lib/directive/ng_control.dart
@@ -1,10 +1,12 @@
 part of angular.directive;
 
 abstract class NgControl implements NgDetachAware {
-  static const NG_VALID_CLASS    = "ng-valid";
-  static const NG_INVALID_CLASS  = "ng-invalid";
-  static const NG_PRISTINE_CLASS = "ng-pristine";
-  static const NG_DIRTY_CLASS    = "ng-dirty";
+  static const NG_VALID_CLASS          = "ng-valid";
+  static const NG_INVALID_CLASS        = "ng-invalid";
+  static const NG_PRISTINE_CLASS       = "ng-pristine";
+  static const NG_DIRTY_CLASS          = "ng-dirty";
+  static const NG_SUBMIT_VALID_CLASS   = "ng-submit-valid";
+  static const NG_SUBMIT_INVALID_CLASS = "ng-submit-invalid";
 
   String _name;
   bool _dirty;
@@ -24,6 +26,7 @@ abstract class NgControl implements NgDetachAware {
       : _parentControl = injector.parent.get(NgControl)
   {
     pristine = true;
+    _scope.$on('submitNgControl', (e, data) => _onSubmit(data));
   }
 
   detach() {
@@ -36,6 +39,14 @@ abstract class NgControl implements NgDetachAware {
     _scope.$broadcast('resetNgModel');
   }
 
+  _onSubmit(bool valid) {
+    if (valid) {
+      element.classes..add(NG_SUBMIT_VALID_CLASS)..remove(NG_SUBMIT_INVALID_CLASS);
+    } else {
+      element.classes..add(NG_SUBMIT_INVALID_CLASS)..remove(NG_SUBMIT_VALID_CLASS);
+    }
+  }
+
   get name => _name;
   set name(value) {
     _name = value;
@@ -151,7 +162,9 @@ class NgNullControl implements NgControl {
   var _controls, _scope, _parentControl, _controlName;
   var errors, _controlByName;
   dom.Element element;
+
   NgNullControl() {}
+  _onSubmit(bool valid) {}
 
   addControl(control) {}
   removeControl(control) {}
@@ -174,4 +187,5 @@ class NgNullControl implements NgControl {
 
   reset() => null;
   detach() => null;
+
 }
diff --git a/lib/directive/ng_form.dart b/lib/directive/ng_form.dart
@@ -38,6 +38,7 @@ class NgForm extends NgControl implements Map<String, NgControl> {
     if (!element.attributes.containsKey('action')) {
       element.onSubmit.listen((event) {
         event.preventDefault();
+        _scope.$broadcast('submitNgControl', [valid == null ? false : valid]);
       });
     }
   }

diff --git a/test/directive/ng_form_spec.dart b/test/directive/ng_form_spec.dart
@@ -304,6 +304,33 @@ describe('form', () {
 
       expect(_.rootScope.submitted).toBe(true);
     }));
+
+    it('should apply the valid and invalid prefixed submit CSS classes to the element', inject((TestBed _) {
+      _.compile('<form name="superForm">' + 
+                ' <input type="text" ng-model="myModel" probe="i" required />' +
+                '</form>');
+
+      NgForm form = _.rootScope['superForm'];
+      Probe probe = _.rootScope.i;
+      var model = probe.directive(NgModel);
+
+      expect(form.element.classes.contains('ng-submit-invalid')).toBe(false);
+      expect(form.element.classes.contains('ng-submit-valid')).toBe(false);
+
+      Event submissionEvent = new Event.eventType('CustomEvent', 'submit');
+
+      form.element.dispatchEvent(submissionEvent);
+      _.rootScope.$apply();
+
+      expect(form.element.classes.contains('ng-submit-invalid')).toBe(true);
+      expect(form.element.classes.contains('ng-submit-valid')).toBe(false);
+
+      _.rootScope.$apply('myModel = "man"');
+      form.element.dispatchEvent(submissionEvent);
+
+      expect(form.element.classes.contains('ng-submit-invalid')).toBe(false);
+      expect(form.element.classes.contains('ng-submit-valid')).toBe(true);
+    }));
   });
 
   describe('reset()', () {