refactor(forms): use multibindings instead of query to get a list of validators

BREAKING CHANGE

Before:

@Directive({selector: '[credit-card]', bindings: [new Binding(NgValidator, {toAlias: forwardRef(() => CreditCardValidator)})]})
class CreditCardValidator {
  get validator() { return CreditCardValidator.validate; }
  static validate(c): StringMap<string, boolean> {...}
}

After:

function creditCardValidator(c): StringMap<string, boolean> {...}
@Directive({selector: '[credit-card]', bindings: [new Binding(NG_VALIDATORS, {toValue: creditCardValidator, multi: true})]})
class CreditCardValidator {}

modules/angular2/src/forms/directives.ts

@@ -11,7 +11,7 @@ import {
   SelectControlValueAccessor,
   NgSelectOption
 } from './directives/select_control_value_accessor';
-import {NgRequiredValidator} from './directives/validators';
+import {DefaultValidators} from './directives/validators';
 
 export {NgControlName} from './directives/ng_control_name';
 export {NgFormControl} from './directives/ng_form_control';
@@ -27,7 +27,7 @@ export {
   SelectControlValueAccessor,
   NgSelectOption
 } from './directives/select_control_value_accessor';
-export {NgValidator, NgRequiredValidator} from './directives/validators';
+export {DefaultValidators} from './directives/validators';
 
 /**
  *
@@ -49,5 +49,5 @@ export const FORM_DIRECTIVES: Type[] = CONST_EXPR([
   CheckboxControlValueAccessor,
   SelectControlValueAccessor,
 
-  NgRequiredValidator
+  DefaultValidators
 ]);

modules/angular2/src/forms/directives/ng_control_name.ts

@@ -4,13 +4,14 @@ import {StringMap} from 'angular2/src/core/facade/collection';
 
 import {QueryList} from 'angular2/core';
 import {Query, Directive, LifecycleEvent} from 'angular2/metadata';
-import {forwardRef, Host, SkipSelf, Binding, Inject} from 'angular2/di';
+import {forwardRef, Host, SkipSelf, Binding, Inject, Optional} from 'angular2/di';
 
 import {ControlContainer} from './control_container';
 import {NgControl} from './ng_control';
-import {NgValidator} from './validators';
-import {controlPath, composeNgValidator, isPropertyUpdated} from './shared';
+import {controlPath, isPropertyUpdated} from './shared';
 import {Control} from '../model';
+import {Validators, NG_VALIDATORS} from '../validators';
+
 
 const controlNameBinding =
     CONST_EXPR(new Binding(NgControl, {toAlias: forwardRef(() => NgControlName)}));
@@ -84,15 +85,15 @@ export class NgControlName extends NgControl {
   update = new EventEmitter();
   model: any;
   viewModel: any;
-  ngValidators: QueryList<NgValidator>;
+  validators: Function[];
   _added = false;
 
   // Scope the query once https://github.com/angular/angular/issues/2603 is fixed
   constructor(@Host() @SkipSelf() parent: ControlContainer,
-              @Query(NgValidator) ngValidators: QueryList<NgValidator>) {
+              @Optional() @Inject(NG_VALIDATORS) validators: Function[]) {
     super();
     this._parent = parent;
-    this.ngValidators = ngValidators;
+    this.validators = validators;
   }
 
   onChanges(c: StringMap<string, any>) {
@@ -119,5 +120,5 @@ export class NgControlName extends NgControl {
 
   get control(): Control { return this.formDirective.getControl(this); }
 
-  get validator(): Function { return composeNgValidator(this.ngValidators); }
+  get validator(): Function { return Validators.compose(this.validators); }
 }

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

@@ -3,12 +3,12 @@ import {EventEmitter, ObservableWrapper} from 'angular2/src/core/facade/async';
 
 import {QueryList} from 'angular2/core';
 import {Query, Directive, LifecycleEvent} from 'angular2/metadata';
-import {forwardRef, Binding} from 'angular2/di';
+import {forwardRef, Binding, Inject, Optional} from 'angular2/di';
 
 import {NgControl} from './ng_control';
 import {Control} from '../model';
-import {NgValidator} from './validators';
-import {setUpControl, composeNgValidator, isPropertyUpdated} from './shared';
+import {Validators, NG_VALIDATORS} from '../validators';
+import {setUpControl, isPropertyUpdated} from './shared';
 
 const formControlBinding =
     CONST_EXPR(new Binding(NgControl, {toAlias: forwardRef(() => NgFormControl)}));
@@ -72,12 +72,11 @@ export class NgFormControl extends NgControl {
   _added = false;
   model: any;
   viewModel: any;
-  ngValidators: QueryList<NgValidator>;
+  validators: Function[];
 
-  // Scope the query once https://github.com/angular/angular/issues/2603 is fixed
-  constructor(@Query(NgValidator) ngValidators: QueryList<NgValidator>) {
+  constructor(@Optional() @Inject(NG_VALIDATORS) validators: Function[]) {
     super();
-    this.ngValidators = ngValidators;
+    this.validators = validators;
   }
 
   onChanges(c: StringMap<string, any>) {
@@ -95,7 +94,7 @@ export class NgFormControl extends NgControl {
 
   get control(): Control { return this.form; }
 
-  get validator(): Function { return composeNgValidator(this.ngValidators); }
+  get validator(): Function { return Validators.compose(this.validators); }
 
   viewToModelUpdate(newValue: any): void {
     this.viewModel = newValue;

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

@@ -3,12 +3,12 @@ import {EventEmitter, ObservableWrapper} from 'angular2/src/core/facade/async';
 
 import {QueryList} from 'angular2/core';
 import {Query, Directive, LifecycleEvent} from 'angular2/metadata';
-import {forwardRef, Binding} from 'angular2/di';
+import {forwardRef, Binding, Inject, Optional} from 'angular2/di';
 
 import {NgControl} from './ng_control';
 import {Control} from '../model';
-import {NgValidator} from './validators';
-import {setUpControl, composeNgValidator, isPropertyUpdated} from './shared';
+import {Validators, NG_VALIDATORS} from '../validators';
+import {setUpControl, isPropertyUpdated} from './shared';
 
 const formControlBinding = CONST_EXPR(new Binding(NgControl, {toAlias: forwardRef(() => NgModel)}));
 
@@ -42,12 +42,11 @@ export class NgModel extends NgControl {
   update = new EventEmitter();
   model: any;
   viewModel: any;
-  ngValidators: QueryList<NgValidator>;
+  validators: Function[];
 
-  // Scope the query once https://github.com/angular/angular/issues/2603 is fixed
-  constructor(@Query(NgValidator) ngValidators: QueryList<NgValidator>) {
+  constructor(@Optional() @Inject(NG_VALIDATORS) validators: Function[]) {
     super();
-    this.ngValidators = ngValidators;
+    this.validators = validators;
   }
 
   onChanges(c: StringMap<string, any>) {
@@ -66,7 +65,7 @@ export class NgModel extends NgControl {
 
   get path(): string[] { return []; }
 
-  get validator(): Function { return composeNgValidator(this.ngValidators); }
+  get validator(): Function { return Validators.compose(this.validators); }
 
   viewToModelUpdate(newValue: any): void {
     this.viewModel = newValue;

modules/angular2/src/forms/directives/shared.ts

@@ -3,7 +3,6 @@ import {isBlank, BaseException, looseIdentical} from 'angular2/src/core/facade/l
 
 import {ControlContainer} from './control_container';
 import {NgControl} from './ng_control';
-import {NgValidator} from './validators';
 import {Control} from '../model';
 import {Validators} from '../validators';
 import {Renderer} from 'angular2/render';
@@ -37,11 +36,6 @@ export function setUpControl(c: Control, dir: NgControl) {
   dir.valueAccessor.registerOnTouched(() => c.markAsTouched());
 }
 
-export function composeNgValidator(ngValidators: QueryList<NgValidator>): Function {
-  if (isBlank(ngValidators)) return Validators.nullValidator;
-  return Validators.compose(ngValidators.map(v => v.validator));
-}
-
 function _throwError(dir: NgControl, message: string): void {
   var path = ListWrapper.join(dir.path, " -> ");
   throw new BaseException(`${message} '${path}'`);

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

@@ -1,19 +1,14 @@
-import {forwardRef, Binding} from 'angular2/di';
+import {forwardRef, OpaqueToken, Binding} from 'angular2/di';
 import {CONST_EXPR} from 'angular2/src/core/facade/lang';
 import {Directive} from 'angular2/metadata';
-import {Validators} from '../validators';
+import {Validators, NG_VALIDATORS} from '../validators';
 
-export class NgValidator {
-  get validator(): Function { throw "Is not implemented"; }
-}
-
-const requiredValidatorBinding =
-    CONST_EXPR(new Binding(NgValidator, {toAlias: forwardRef(() => NgRequiredValidator)}));
+const DEFAULT_VALIDATORS =
+    CONST_EXPR(new Binding(NG_VALIDATORS, {toValue: Validators.required, multi: true}));
 
 @Directive({
   selector: '[required][ng-control],[required][ng-form-control],[required][ng-model]',
-  bindings: [requiredValidatorBinding]
+  bindings: [DEFAULT_VALIDATORS]
 })
-export class NgRequiredValidator extends NgValidator {
-  get validator(): Function { return Validators.required; }
+export class DefaultValidators {
 }

modules/angular2/src/forms/validators.ts

@@ -1,8 +1,12 @@
 import {isBlank, isPresent} from 'angular2/src/core/facade/lang';
+import {CONST_EXPR} from 'angular2/src/core/facade/lang';
 import {ListWrapper, StringMapWrapper} from 'angular2/src/core/facade/collection';
+import {OpaqueToken} from 'angular2/di';
 
 import * as modelModule from './model';
 
+export const NG_VALIDATORS = CONST_EXPR(new OpaqueToken("NgValidators"));
+
 /**
  * Provides a set of validators used by form controls.
  *
@@ -20,6 +24,8 @@ export class Validators {
   static nullValidator(c: any): StringMap<string, boolean> { return null; }
 
   static compose(validators: Function[]): Function {
+    if (isBlank(validators)) return Validators.nullValidator;
+
     return function(c: modelModule.Control) {
       var res = ListWrapper.reduce(validators, (res, validator) => {
         var errors = validator(c);