feat(ngControl): provide support for clearing errors states

Author: matsko

lib/directive/ng_control.dart

@@ -186,6 +186,26 @@ abstract class NgControl implements AttachAware, DetachAware {
     if (hasRemovals) _parentControl.removeStates(this);
   }
 
+  /**
+   * Removes all of the errors on the control and on any child controls and then sets the control to valid.
+   */
+  void clearErrorStates() {
+    errorStates.forEach((errorName, state) {
+      element..removeClass(errorName + '-invalid')
+             ..removeClass(errorName + '-valid');
+
+      _parentControl.removeErrorState(this, errorName);
+    });
+
+    errorStates.clear();
+
+    removeInfoState(this, NG_INVALID);
+
+    _controls.forEach((control) {
+      control.clearErrorStates();
+    });
+  }
+
   /**
    * Whether or not the control contains the given error.
    *
@@ -313,6 +333,7 @@ class NgNullControl implements NgControl {
   get parentControl => null;
 
   String _getOppositeInfoState(String state) => null;
+  void clearErrorStates() {}
   void addErrorState(NgControl control, String state) {}
   void removeErrorState(NgControl control, String state) {}
   void addInfoState(NgControl control, String state) {}

test/directive/ng_form_spec.dart

@@ -718,6 +718,99 @@ void main() {
         expect(s.eval('myForm["name"].name')).toEqual("name");
     });
 
+    it("should clear all the error states from the entire form and all error-related CSS classes", (TestBed _) {
+        Scope s = _.rootScope;
+        s.context['name'] = 'cool';
+
+        var form = _.compile('<form name="myForm">'
+                             ' <input type="text" ng-model="someModel" probe="i" name="name" />'
+                             '</form>');
+
+        NgForm formModel = s.context['myForm'];
+        Probe probe = s.context['i'];
+        NgModel inputModel = probe.directive(NgModel);
+        var input = inputModel.element.node;
+
+        inputModel.addError('required');
+        s.apply();
+
+        expect(form).toHaveClass('required-invalid');
+        expect(formModel.hasErrorState('required')).toBe(true);
+
+        expect(input).toHaveClass('required-invalid');
+        expect(inputModel.hasErrorState('required')).toBe(true);
+
+        formModel.clearErrorStates();
+        s.apply();
+
+        expect(form).not.toHaveClass('required-invalid');
+        expect(form).not.toHaveClass('ng-invalid');
+        expect(formModel.hasErrorState('required')).toBe(false);
+
+        expect(input).not.toHaveClass('required-invalid');
+        expect(input).not.toHaveClass('ng-invalid');
+        expect(inputModel.hasErrorState('required')).toBe(false);
+    });
+
+    it("should clear all errors from the fieldset and properly update the parent form\'s errors", (TestBed _) {
+        Scope s = _.rootScope;
+        s.context['name'] = 'cool';
+
+        var form = _.compile('<form name="myForm">'
+                             ' <input type="text" ng-model="anotherModel" probe="x" />' +
+                             ' <fieldset probe="f">' +
+                             '   <input type="text" ng-model="someModel" probe="i" name="name" />'
+                             ' </fieldset>' +
+                             '</form>');
+
+        NgForm formModel = s.context['myForm'];
+        NgModel inputModel = s.context['i'].directive(NgModel);
+        var input = inputModel.element.node;
+
+        NgModel anotherModel = s.context['x'].directive(NgModel);
+        var anotherInput = anotherModel.element.node;
+
+        NgForm fieldsetModel = s.context['f'].directive(NgForm);
+        var fieldset = fieldsetModel.element.node;
+
+        inputModel.addError("required");
+        anotherModel.addError("required");
+        s.apply();
+
+        expect(form).toHaveClass('required-invalid');
+        expect(formModel.hasErrorState('required')).toBe(true);
+        expect(fieldset).toHaveClass('required-invalid');
+        expect(fieldsetModel.hasErrorState('required')).toBe(true);
+
+        expect(input).toHaveClass('required-invalid');
+        expect(inputModel.hasErrorState('required')).toBe(true);
+        expect(anotherInput).toHaveClass('required-invalid');
+        expect(anotherModel.hasErrorState('required')).toBe(true);
+
+        fieldsetModel.clearErrorStates();
+        s.apply();
+
+        expect(form).toHaveClass('required-invalid');
+        expect(anotherInput).toHaveClass('required-invalid');
+
+        expect(fieldset).not.toHaveClass('required-invalid');
+        expect(input).not.toHaveClass('required-invalid');
+
+        expect(fieldset).not.toHaveClass('ng-invalid');
+        expect(form).toHaveClass('ng-invalid');
+
+        expect(fieldsetModel.hasErrorState('required')).toBe(false);
+        expect(inputModel.hasErrorState('required')).toBe(false);
+        expect(anotherModel.hasErrorState('required')).toBe(true);
+        expect(formModel.hasErrorState('required')).toBe(true);
+
+        anotherModel.removeError("required");
+        s.apply();
+
+        expect(formModel.hasErrorState('required')).toBe(false);
+        expect(form).not.toHaveClass('required-invalid');
+    });
+
     describe('regression tests: form', () {
       beforeEachModule((Module module) {
         module.bind(NgForm);

test/directive/ng_model_spec.dart

@@ -1326,6 +1326,33 @@ void main() {
 
         expect(model.hasErrorState('big-failure')).toBe(false);
       });
+
+      it("model.clearErrorState() should erase all the errors and set the model to valid", (TestBed _) {
+          Scope s = _.rootScope;
+
+          _.compile('<input type="text" ng-model="myModel" probe="i" />');
+          _.rootScope.apply('myModel = "animal"');
+
+          NgModel inputModel = s.context['i'].directive(NgModel);
+          var input = inputModel.element.node;
+
+          inputModel.addError("required");
+          inputModel.addError("minlength");
+          s.apply();
+
+          expect(inputModel.hasErrorState("required")).toBe(true);
+          expect(inputModel.hasErrorState("minlength")).toBe(true);
+          expect(inputModel.invalid).toBe(true);
+          expect(inputModel.valid).toBe(false);
+
+          inputModel.clearErrorStates();
+          s.apply();
+
+          expect(inputModel.hasErrorState("required")).toBe(false);
+          expect(inputModel.hasErrorState("minlength")).toBe(false);
+          expect(inputModel.invalid).toBe(false);
+          expect(inputModel.valid).toBe(true);
+      });
     });
 
     describe('text-like events', () {