feat(forms): Implement a way to manually set errors on a control

Example:

var login = new Control("someLogin");
c.setErrors({"notUnique": true});
expect(c.valid).toEqual(false);
expect(c.errors).toEqual({"notUnique": true});

c.updateValue("newLogin");
expect(c.valid).toEqual(true);

BREAKING CHANGE:

Before:

ControlGroup.errors and ControlArray.errors returned a reduced value of their children controls' errors.

After:

ControlGroup.errors and ControlArray.errors return the errors of the group and array.
And ControlGroup.controlsErrors and ControlArray.controlsErrors return the reduce value of their children controls' errors.

Closes #4917

modules/angular2/src/core/forms/directives/abstract_control_directive.ts

@@ -12,6 +12,8 @@ export class AbstractControlDirective {
     return isPresent(this.control) ? this.control.errors : null;
   }
 
+  get controlsErrors(): any { return isPresent(this.control) ? this.control.controlsErrors : null; }
+
   get pristine(): boolean { return isPresent(this.control) ? this.control.pristine : null; }
 
   get dirty(): boolean { return isPresent(this.control) ? this.control.dirty : null; }

modules/angular2/src/core/forms/directives/ng_form.ts

@@ -104,7 +104,7 @@ export class NgForm extends ControlContainer implements Form {
       var ctrl = new Control();
       setUpControl(ctrl, dir);
       container.addControl(dir.name, ctrl);
-      ctrl.updateValidity();
+      ctrl.updateValueAndValidity({emitEvent: false});
     });
   }
 
@@ -115,7 +115,7 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       if (isPresent(container)) {
         container.removeControl(dir.name);
-        container.updateValidity();
+        container.updateValueAndValidity({emitEvent: false});
       }
     });
   }
@@ -125,7 +125,7 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       var group = new ControlGroup({});
       container.addControl(dir.name, group);
-      group.updateValidity();
+      group.updateValueAndValidity({emitEvent: false});
     });
   }
 
@@ -134,7 +134,7 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       if (isPresent(container)) {
         container.removeControl(dir.name);
-        container.updateValidity();
+        container.updateValueAndValidity({emitEvent: false});
       }
     });
   }

modules/angular2/src/core/forms/directives/ng_form_control.ts

@@ -85,7 +85,7 @@ export class NgFormControl extends NgControl implements OnChanges {
   onChanges(changes: {[key: string]: SimpleChange}): void {
     if (this._isControlChanged(changes)) {
       setUpControl(this.form, this);
-      this.form.updateValidity();
+      this.form.updateValueAndValidity({emitEvent: false});
     }
     if (isPropertyUpdated(changes, this.viewModel)) {
       this.form.updateValue(this.model);

modules/angular2/src/core/forms/directives/ng_form_model.ts

@@ -112,7 +112,7 @@ export class NgFormModel extends ControlContainer implements Form,
   addControl(dir: NgControl): void {
     var ctrl: any = this.form.find(dir.path);
     setUpControl(ctrl, dir);
-    ctrl.updateValidity();
+    ctrl.updateValueAndValidity({emitEvent: false});
     this.directives.push(dir);
   }
 

modules/angular2/src/core/forms/directives/ng_model.ts

@@ -61,7 +61,7 @@ export class NgModel extends NgControl implements OnChanges {
   onChanges(changes: {[key: string]: SimpleChange}) {
     if (!this._added) {
       setUpControl(this._control, this);
-      this._control.updateValidity();
+      this._control.updateValueAndValidity({emitEvent: false});
       this._added = true;
     }
 

modules/angular2/src/core/forms/model.ts

@@ -46,22 +46,20 @@ function _find(control: AbstractControl, path: Array<string | number>| string) {
 /**
  *
  */
-export class AbstractControl {
+export abstract class AbstractControl {
   /** @internal */
   _value: any;
-  /** @internal */
-  _status: string;
-  /** @internal */
-  _errors: {[key: string]: any};
-  /** @internal */
-  _pristine: boolean = true;
-  /** @internal */
-  _touched: boolean = false;
-  /** @internal */
-  _parent: ControlGroup | ControlArray;
+
   /** @internal */
   _valueChanges: EventEmitter;
 
+  private _status: string;
+  private _errors: {[key: string]: any};
+  private _controlsErrors: any;
+  private _pristine: boolean = true;
+  private _touched: boolean = false;
+  private _parent: ControlGroup | ControlArray;
+
   constructor(public validator: Function) {}
 
   get value(): any { return this._value; }
@@ -70,8 +68,16 @@ export class AbstractControl {
 
   get valid(): boolean { return this._status === VALID; }
 
+  /**
+   * Returns the errors of this control.
+   */
   get errors(): {[key: string]: any} { return this._errors; }
 
+  /**
+   * Returns the errors of the child controls.
+   */
+  get controlsErrors(): any { return this._controlsErrors; }
+
   get pristine(): boolean { return this._pristine; }
 
   get dirty(): boolean { return !this.pristine; }
@@ -105,17 +111,6 @@ export class AbstractControl {
 
   setParent(parent: ControlGroup | ControlArray): void { this._parent = parent; }
 
-  updateValidity({onlySelf}: {onlySelf?: boolean} = {}): void {
-    onlySelf = normalizeBool(onlySelf);
-
-    this._errors = this.validator(this);
-    this._status = isPresent(this._errors) ? INVALID : VALID;
-
-    if (isPresent(this._parent) && !onlySelf) {
-      this._parent.updateValidity({onlySelf: onlySelf});
-    }
-  }
-
   updateValueAndValidity({onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
       void {
     onlySelf = normalizeBool(onlySelf);
@@ -124,7 +119,8 @@ export class AbstractControl {
     this._updateValue();
 
     this._errors = this.validator(this);
-    this._status = isPresent(this._errors) ? INVALID : VALID;
+    this._controlsErrors = this._calculateControlsErrors();
+    this._status = this._calculateStatus();
 
     if (emitEvent) {
       ObservableWrapper.callNext(this._valueChanges, this._value);
@@ -135,6 +131,38 @@ export class AbstractControl {
     }
   }
 
+  /**
+   * Sets errors on a control.
+   *
+   * This is used when validations are run not automatically, but manually by the user.
+   *
+   * Calling `setErrors` will also update the validity of the parent control.
+   *
+   * ## Usage
+   *
+   * ```
+   * var login = new Control("someLogin");
+   * login.setErrors({
+   *   "notUnique": true
+   * });
+   *
+   * expect(login.valid).toEqual(false);
+   * expect(login.errors).toEqual({"notUnique": true});
+   *
+   * login.updateValue("someOtherLogin");
+   *
+   * expect(login.valid).toEqual(true);
+   * ```
+   */
+  setErrors(errors: {[key: string]: any}): void {
+    this._errors = errors;
+    this._status = this._calculateStatus();
+
+    if (isPresent(this._parent)) {
+      this._parent._updateControlsErrors();
+    }
+  }
+
   find(path: Array<string | number>| string): AbstractControl { return _find(this, path); }
 
   getError(errorCode: string, path: string[] = null): any {
@@ -151,7 +179,23 @@ export class AbstractControl {
   }
 
   /** @internal */
-  _updateValue(): void {}
+  _updateControlsErrors(): void {
+    this._controlsErrors = this._calculateControlsErrors();
+    this._status = this._calculateStatus();
+
+    if (isPresent(this._parent)) {
+      this._parent._updateControlsErrors();
+    }
+  }
+
+  private _calculateStatus(): string {
+    return isPresent(this._errors) || isPresent(this._controlsErrors) ? INVALID : VALID;
+  }
+
+  /** @internal */
+  abstract _updateValue(): void;
+  /** @internal */
+  abstract _calculateControlsErrors(): any;
 }
 
 /**
@@ -177,7 +221,7 @@ export class Control extends AbstractControl {
   constructor(value: any = null, validator: Function = Validators.nullValidator) {
     super(validator);
     this._value = value;
-    this.updateValidity({onlySelf: true});
+    this.updateValueAndValidity({onlySelf: true, emitEvent: false});
     this._valueChanges = new EventEmitter();
   }
 
@@ -203,6 +247,16 @@ export class Control extends AbstractControl {
     this.updateValueAndValidity({onlySelf: onlySelf, emitEvent: emitEvent});
   }
 
+  /**
+   * @internal
+   */
+  _updateValue() {}
+
+  /**
+   * @internal
+   */
+  _calculateControlsErrors() { return null; }
+
   /**
    * Register a listener for change events.
    */
@@ -226,14 +280,14 @@ export class ControlGroup extends AbstractControl {
   private _optionals: {[key: string]: boolean};
 
   constructor(public controls: {[key: string]: AbstractControl},
-              optionals: {[key: string]: boolean} = null, validator: Function = Validators.group) {
+              optionals: {[key: string]: boolean} = null,
+              validator: Function = Validators.nullValidator) {
     super(validator);
     this._optionals = isPresent(optionals) ? optionals : {};
     this._valueChanges = new EventEmitter();
 
     this._setParentForControls();
-    this._value = this._reduceValue();
-    this.updateValidity({onlySelf: true});
+    this.updateValueAndValidity({onlySelf: true, emitEvent: false});
   }
 
   addControl(name: string, control: AbstractControl): void {
@@ -266,6 +320,9 @@ export class ControlGroup extends AbstractControl {
   /** @internal */
   _updateValue() { this._value = this._reduceValue(); }
 
+  /** @internal */
+  _calculateControlsErrors() { return Validators.group(this); }
+
   /** @internal */
   _reduceValue() {
     return this._reduceChildren({}, (acc, control, name) => {
@@ -314,14 +371,13 @@ export class ControlGroup extends AbstractControl {
  * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
  */
 export class ControlArray extends AbstractControl {
-  constructor(public controls: AbstractControl[], validator: Function = Validators.array) {
+  constructor(public controls: AbstractControl[], validator: Function = Validators.nullValidator) {
     super(validator);
 
     this._valueChanges = new EventEmitter();
 
     this._setParentForControls();
-    this._updateValue();
-    this.updateValidity({onlySelf: true});
+    this.updateValueAndValidity({onlySelf: true, emitEvent: false});
   }
 
   /**
@@ -363,6 +419,9 @@ export class ControlArray extends AbstractControl {
   /** @internal */
   _updateValue(): void { this._value = this.controls.map((control) => control.value); }
 
+  /** @internal */
+  _calculateControlsErrors() { return Validators.array(this); }
+
   /** @internal */
   _setParentForControls(): void {
     this.controls.forEach((control) => { control.setParent(this); });

modules/angular2/src/core/forms/validators.ts

@@ -62,10 +62,10 @@ export class Validators {
         res[name] = control.errors;
       }
     });
-    return StringMapWrapper.isEmpty(res) ? null : {'controls': res};
+    return StringMapWrapper.isEmpty(res) ? null : res;
   }
 
-  static array(array: modelModule.ControlArray): {[key: string]: any} {
+  static array(array: modelModule.ControlArray): any[] {
     var res: any[] = [];
     var anyErrors: boolean = false;
     array.controls.forEach((control) => {
@@ -74,6 +74,6 @@ export class Validators {
         anyErrors = true;
       }
     });
-    return anyErrors ? {'controls': res} : null;
+    return anyErrors ? res : null;
   }
 }

modules/angular2/test/core/forms/form_builder_spec.ts

@@ -53,7 +53,7 @@ export function main() {
     it("should use default validators when no validators are provided", () => {
       var g = b.group({"login": "some value"});
       expect(g.controls["login"].validator).toBe(Validators.nullValidator);
-      expect(g.validator).toBe(Validators.group);
+      expect(g.validator).toBe(Validators.nullValidator);
     });
 
     it("should create control arrays", () => {