cargdev/angular
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(forms): add support for Validator

Browse Source 
Currently, the only way for a directive to export a validator is by providing a function. This makes it ackward to write validators that depend on directive inputs. In addition to supporting functions as validators, classes implementing the Validator interface are supported too.
This commit is contained in:
vsavkin
2015-10-28 16:54:27 -07:00
committed by Victor Savkin
parent 9c63a471bb
commit 547e011abe
12 changed files with 123 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
modules/angular2/src/core/forms.ts
View File

@ -37,7 +37,8 @@ export {NG_VALIDATORS, Validators} from './forms/validators';
export {
RequiredValidator,
MinLengthValidator,
MaxLengthValidator
MaxLengthValidator,
Validator
} from './forms/directives/validators';
export {FormBuilder} from './forms/form_builder';

5
modules/angular2/src/core/forms/directives/ng_control.ts
View File

@ -1,5 +1,6 @@
import {ControlValueAccessor} from './control_value_accessor';
import {AbstractControlDirective} from './abstract_control_directive';
import {unimplemented} from 'angular2/src/core/facade/exceptions';
/**
* A base class that all control directive extend.
@ -13,7 +14,7 @@ export class NgControl extends AbstractControlDirective {
name: string = null;
valueAccessor: ControlValueAccessor = null;
get validator(): Function { return null; }
get validator(): Function { return unimplemented(); }
viewToModelUpdate(newValue: any): void {}
viewToModelUpdate(newValue: any): void { return unimplemented(); }
}

13
modules/angular2/src/core/forms/directives/ng_control_name.ts
View File

@ -8,7 +8,7 @@ import {forwardRef, Host, SkipSelf, Provider, Inject, Optional} from 'angular2/s
import {ControlContainer} from './control_container';
import {NgControl} from './ng_control';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
import {controlPath, isPropertyUpdated, selectValueAccessor} from './shared';
import {controlPath, composeValidators, isPropertyUpdated, selectValueAccessor} from './shared';
import {Control} from '../model';
import {Validators, NG_VALIDATORS} from '../validators';
@ -85,16 +85,17 @@ export class NgControlName extends NgControl implements OnChanges,
update = new EventEmitter();
model: any;
viewModel: any;
validators: Function[];
private _validator: Function;
/** @internal */
_added = false;
constructor(@Host() @SkipSelf() parent: ControlContainer,
@Optional() @Inject(NG_VALIDATORS) validators: Function[],
@Optional() @Inject(NG_VALIDATORS) validators:
/* Array<Validator|Function> */ any[],
@Optional() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
super();
this._parent = parent;
this.validators = validators;
this._validator = composeValidators(validators);
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
@ -120,7 +121,7 @@ export class NgControlName extends NgControl implements OnChanges,
get formDirective(): any { return this._parent.formDirective; }
get control(): Control { return this.formDirective.getControl(this); }
get validator(): Function { return this._validator; }
get validator(): Function { return Validators.compose(this.validators); }
get control(): Control { return this.formDirective.getControl(this); }
}

13
modules/angular2/src/core/forms/directives/ng_form_control.ts
View File

@ -9,7 +9,7 @@ import {NgControl} from './ng_control';
import {Control} from '../model';
import {Validators, NG_VALIDATORS} from '../validators';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
import {setUpControl, isPropertyUpdated, selectValueAccessor} from './shared';
import {setUpControl, composeValidators, isPropertyUpdated, selectValueAccessor} from './shared';
const formControlBinding =
CONST_EXPR(new Provider(NgControl, {useExisting: forwardRef(() => NgFormControl)}));
@ -73,12 +73,13 @@ export class NgFormControl extends NgControl implements OnChanges {
update = new EventEmitter();
model: any;
viewModel: any;
validators: Function[];
private _validator: Function;
constructor(@Optional() @Inject(NG_VALIDATORS) validators: Function[],
constructor(@Optional() @Inject(NG_VALIDATORS) validators:
/* Array<Validator|Function> */ any[],
@Optional() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
super();
this.validators = validators;
this._validator = composeValidators(validators);
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
@ -95,9 +96,9 @@ export class NgFormControl extends NgControl implements OnChanges {
get path(): string[] { return []; }
get control(): Control { return this.form; }
get validator(): Function { return this._validator; }
get validator(): Function { return Validators.compose(this.validators); }
get control(): Control { return this.form; }
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;

11
modules/angular2/src/core/forms/directives/ng_model.ts
View File

@ -8,7 +8,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'
import {NgControl} from './ng_control';
import {Control} from '../model';
import {Validators, NG_VALIDATORS} from '../validators';
import {setUpControl, isPropertyUpdated, selectValueAccessor} from './shared';
import {setUpControl, isPropertyUpdated, selectValueAccessor, composeValidators} from './shared';
const formControlBinding =
CONST_EXPR(new Provider(NgControl, {useExisting: forwardRef(() => NgModel)}));
@ -49,12 +49,13 @@ export class NgModel extends NgControl implements OnChanges {
update = new EventEmitter();
model: any;
viewModel: any;
validators: Function[];
private _validator: Function;
constructor(@Optional() @Inject(NG_VALIDATORS) validators: Function[],
constructor(@Optional() @Inject(NG_VALIDATORS) validators:
/* Array<Validator|Function> */ any[],
@Optional() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
super();
this.validators = validators;
this._validator = composeValidators(validators);
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
@ -75,7 +76,7 @@ export class NgModel extends NgControl implements OnChanges {
get path(): string[] { return []; }
get validator(): Function { return Validators.compose(this.validators); }
get validator(): Function { return this._validator; }
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;

12
modules/angular2/src/core/forms/directives/normalize_validator.dart Normal file
View File

@ -0,0 +1,12 @@
library angular2.core.forms.normalize_validators;
import 'package:angular2/src/core/forms/directives/validators.dart' show Validator;
Function normalizeValidator(dynamic validator){
if (validator is Validator) {
return (c) => validator.validate(c);
} else {
return validator;
}
}

9
modules/angular2/src/core/forms/directives/normalize_validator.ts Normal file
View File

@ -0,0 +1,9 @@
import {Validator} from './validators';
export function normalizeValidator(validator: Function | Validator): Function {
if ((<Validator>validator).validate !== undefined) {
return (c) => (<Validator>validator).validate(c);
} else {
return <Function>validator;
}
}

7
modules/angular2/src/core/forms/directives/shared.ts
View File

@ -15,6 +15,7 @@ import {DefaultValueAccessor} from './default_value_accessor';
import {NumberValueAccessor} from './number_value_accessor';
import {CheckboxControlValueAccessor} from './checkbox_value_accessor';
import {SelectControlValueAccessor} from './select_control_value_accessor';
import {normalizeValidator} from './normalize_validator';
export function controlPath(name: string, parent: ControlContainer): string[] {
@ -59,6 +60,12 @@ export function setProperty(renderer: Renderer, elementRef: ElementRef, propName
renderer.setElementProperty(elementRef, propName, propValue);
}
export function composeValidators(
validators: /* Array<Validator|Function> */ any[]): Function {
return isPresent(validators) ? Validators.compose(validators.map(normalizeValidator)) :
Validators.nullValidator;
}
export function isPropertyUpdated(changes: {[key: string]: any}, viewModel: any): boolean {
if (!StringMapWrapper.contains(changes, "model")) return false;
var change = changes["model"];

62
modules/angular2/src/core/forms/directives/validators.ts
View File

@ -2,8 +2,30 @@ import {forwardRef, Provider, OpaqueToken} from 'angular2/src/core/di';
import {CONST_EXPR} from 'angular2/src/core/facade/lang';
import {Attribute, Directive} from 'angular2/src/core/metadata';
import {Validators, NG_VALIDATORS} from '../validators';
import {Control} from '../model';
import * as modelModule from '../model';
import {NumberWrapper} from "angular2/src/core/facade/lang";
/**
* An interface that can be implemented by classes that can act as validators.
*
* ## Usage
*
* ```typescript
* @Directive({
* selector: '[custom-validator]',
* providers: [provide(NG_VALIDATORS, {useExisting: CustomValidatorDirective, multi: true})]
* })
* class CustomValidatorDirective implements Validator {
* validate(c: Control): {[key: string]: any} {
* return {"custom": true};
* }
* }
* ```
*/
export interface Validator { validate(c: modelModule.Control): {[key: string]: any}; }
const REQUIRED_VALIDATOR =
CONST_EXPR(new Provider(NG_VALIDATORS, {useValue: Validators.required, multi: true}));
@ -14,40 +36,34 @@ const REQUIRED_VALIDATOR =
export class RequiredValidator {
}
function createMinLengthValidator(dir): any {
return Validators.minLength(dir.minLength);
}
const MIN_LENGTH_VALIDATOR = CONST_EXPR(new Provider(NG_VALIDATORS, {
useFactory: createMinLengthValidator,
deps: [forwardRef(() => MinLengthValidator)],
multi: true
}));
const MIN_LENGTH_VALIDATOR = CONST_EXPR(
new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MinLengthValidator), multi: true}));
@Directive({
selector: '[minlength][ng-control],[minlength][ng-form-control],[minlength][ng-model]',
providers: [MIN_LENGTH_VALIDATOR]
})
export class MinLengthValidator {
minLength: number;
export class MinLengthValidator implements Validator {
private _validator: Function;
constructor(@Attribute("minlength") minLength: string) {
this.minLength = NumberWrapper.parseInt(minLength, 10);
this._validator = Validators.minLength(NumberWrapper.parseInt(minLength, 10));
}
validate(c: Control): {[key: string]: any} { return this._validator(c); }
}
function createMaxLengthValidator(dir): any {
return Validators.maxLength(dir.maxLength);
}
const MAX_LENGTH_VALIDATOR = CONST_EXPR(new Provider(NG_VALIDATORS, {
useFactory: createMaxLengthValidator,
deps: [forwardRef(() => MaxLengthValidator)],
multi: true
}));
const MAX_LENGTH_VALIDATOR = CONST_EXPR(
new Provider(NG_VALIDATORS, {useExisting: forwardRef(() => MaxLengthValidator), multi: true}));
@Directive({
selector: '[maxlength][ng-control],[maxlength][ng-form-control],[maxlength][ng-model]',
providers: [MAX_LENGTH_VALIDATOR]
})
export class MaxLengthValidator {
maxLength: number;
constructor(@Attribute("maxlength") maxLength: string) {
this.maxLength = NumberWrapper.parseInt(maxLength, 10);
export class MaxLengthValidator implements Validator {
private _validator: Function;
constructor(@Attribute("maxlength") minLength: string) {
this._validator = Validators.maxLength(NumberWrapper.parseInt(minLength, 10));
}
validate(c: Control): {[key: string]: any} { return this._validator(c); }
}