I have embarked on a small project involving Angular 2.0 and TypeScript. From what I understand, Angular 2.0 does not come equipped with built-in validators for the "min" and "max" attributes. I am aware of the process to create a custom validator and associate it using FormBuilder, but I am curious about developing a custom validator directive that can be attached to an attribute. Here is how the HTML appears:
<div class="unit">
<div class="label">Age (13 - 120):</div>
<div class="labelTarget">
<input id="ageFrm" min="13" max="120" type="number" required=""
ng-control="age" #age="form" [class.error]="!age.valid"
[(ng-model)]="ageValue"/> {{age.valid}}
</div>
</div>
The current state of age.valid is always true due to the absence of validators for min and max. I attempted to create my own. Firstly, the custom validation functions:
import {Control} from "angular2/angular2";
export class HealthAppCustomValidators {
static min(min: number): Function {
return (control: Control): {[key: string]: any} => {
var v: number = Number(control.value);
console.log("validating " + v + " against " + min);
return v < min ?
{"min": {"requiredMin": min, "actualMin": v}} :
null;
};
}
static max(max: number): Function {
return (control: Control): {[key: string]: any} => {
var v: number = Number(control.value);
return v > max ?
{"max": {"requiredMax": max, "actualMax": v}} :
null;
};
}
}
Next, the directives (based on examination of the source code):
import {Attribute, Control, Directive, forwardRef, Provider, NG_VALIDATORS} from "angular2/angular2";
import {HealthAppCustomValidators} from "./customValidators";
const MIN_VALIDATOR = new Provider(NG_VALIDATORS, {useExisting:
forwardRef(() => MinValidator), multi:true});
@Directive({
selector: '[min][ng-control],[min][ng-form-control],[min][ng-model]',
providers: [MIN_VALIDATOR]
})
export class MinValidator {
private _validator: Function;
constructor(@Attribute("min") min: string) {
console.log(min);
this._validator = HealthAppCustomValidators.min(Number(min));
}
validate(c: Control): {[key: string]: any} {
console.log("validate");
return this._validator(c);
}
}
However, upon attempting to import the directives, the page load fails and presents the following error:
TypeError: validator is not a function
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12990:24
at Array.reduce (native)
at Function.ListWrapper.reduce (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:4206:19)
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12989:44
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12990:24
at Array.reduce (native)
at Function.ListWrapper.reduce (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:4206:19)
at Control.validator (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:12989:44)
at Control.AbstractControl.updateValidity (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:18871:27)
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:14097:14
Any guidance on the proper procedure for achieving this without FormBuilder would be greatly appreciated.