Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 07:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

input[type=text] now works with binding, validation, formatter, required

Browse source
This commit is contained in:
Misko Hevery 2010-03-24 16:13:42 -07:00
parent 3d36942400
commit 0c42eb9909
7 changed files with 190 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/Angular.js
View file

@ -44,6 +44,8 @@ function extensionList(angular, name) {
}
var consoleNode, msie,
VALUE = 'value',
NOOP = 'noop',
jQuery = window['jQuery'] || window['$'], // weirdness to make IE happy
slice = Array.prototype.slice,
angular = window['angular'] || (window['angular'] = {}),
@ -92,6 +94,9 @@ function isObject(value){ return typeof value == 'object';}
function isString(value){ return typeof value == 'string';}
function isArray(value) { return value instanceof Array; }
function isFunction(value){ return typeof value == 'function';}
function lowercase(value){ return isString(value) ? value.toLowerCase() : value; }
function uppercase(value){ return isString(value) ? value.toUpperCase() : value; }
function trim(value) { return isString(value) ? value.replace(/^\s*/, '').replace(/\s*$/, '') : value; };
function log(a, b, c){
var console = window['console'];
@ -244,10 +249,6 @@ function outerHTML(node) {
return outerHTML;
}
function trim(str) {
return str.replace(/^ */, '').replace(/ *$/, '');
}
function toBoolean(value) {
var v = ("" + value).toLowerCase();
if (v == 'f' || v == '0' || v == 'false' || v == 'no')

4
src/Compiler.js
View file

@ -105,9 +105,7 @@ Compiler.prototype = {
templatize: function(element){
var self = this,
elementName = element[0].nodeName,
widgets = self.widgets,
widget = widgets[elementName],
widget = self.widgets[element[0].nodeName],
directives = self.directives,
descend = true,
exclusive = false,

24
src/Validators.js
View file

@ -1,4 +1,6 @@
foreach({
'noop': noop,
'regexp': function(value, regexp, msg) {
if (!value.match(regexp)) {
return msg ||
@ -7,7 +9,7 @@ foreach({
return null;
}
},
'number': function(value, min, max) {
var num = 1 * value;
if (num == value) {
@ -19,40 +21,40 @@ foreach({
}
return null;
} else {
return "Value is not a number.";
return "Not a number";
}
},
'integer': function(value, min, max) {
var numberError = angularValidator['number'](value, min, max);
if (numberError) return numberError;
if (!("" + value).match(/^\s*[\d+]*\s*$/) || value != Math.round(value)) {
return "Value is not a whole number.";
return "Not a whole number";
}
return null;
},
'date': function(value, min, max) {
if (value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/)) {
return null;
}
return "Value is not a date. (Expecting format: 12/31/2009).";
},
'ssn': function(value) {
if (value.match(/^\d\d\d-\d\d-\d\d\d\d$/)) {
return null;
}
return "SSN needs to be in 999-99-9999 format.";
},
'email': function(value) {
if (value.match(/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)) {
return null;
}
return "Email needs to be in username@host.com format.";
},
'phone': function(value) {
if (value.match(/^1\(\d\d\d\)\d\d\d-\d\d\d\d$/)) {
return null;
@ -62,14 +64,14 @@ foreach({
}
return "Phone number needs to be in 1(987)654-3210 format in North America or +999 (123) 45678 906 internationaly.";
},
'url': function(value) {
if (value.match(/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/)) {
return null;
}
return "URL needs to be in http://server[:port]/path format.";
},
'json': function(value) {
try {
fromJson(value);
@ -78,7 +80,7 @@ foreach({
return e.toString();
}
},
'asynchronous': function(text, asynchronousFn) {
var stateKey = '$validateState';
var lastKey = '$lastKey';

34
src/jqLite.js
View file

@ -77,22 +77,24 @@ JQLite.prototype = {
},
bind: function(type, fn){
var element = this[0],
bind = this.data('bind'),
var self = this,
element = self[0],
bind = self.data('bind'),
eventHandler;
if (!bind) this.data('bind', bind = {});
eventHandler = bind[type];
if (!eventHandler) {
bind[type] = eventHandler = function() {
var self = this;
foreach(eventHandler.fns, function(fn){
fn.apply(self, arguments);
});
};
eventHandler.fns = [];
addEventListener(element, type, eventHandler);
}
eventHandler.fns.push(fn);
foreach(type.split(' '), function(type){
eventHandler = bind[type];
if (!eventHandler) {
bind[type] = eventHandler = function() {
foreach(eventHandler.fns, function(fn){
fn.apply(self, arguments);
});
};
eventHandler.fns = [];
addEventListener(element, type, eventHandler);
}
eventHandler.fns.push(fn);
});
},
trigger: function(type) {
@ -134,6 +136,10 @@ JQLite.prototype = {
return false;
},
removeClass: function(selector) {
this[0].className = trim((" " + this[0].className + " ").replace(/[\n\t]/g, " ").replace(" " + selector + " ", ""));
},
addClass: function( selector ) {
if (!this.hasClass(selector)) {
this[0].className += ' ' + selector;

77
src/widgets2.js
View file

@ -1,12 +1,79 @@
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
function scopeAccessor(scope, element) {
var expr = element.attr('name'),
farmatterName = element.attr('ng-format') || NOOP,
formatter = angularFormatter(farmatterName);
if (!expr) throw "Required field 'name' not found.";
if (!formatter) throw "Formatter named '" + farmatterName + "' not found.";
return {
get: function() {
return formatter['format'](scope.$eval(expr));
},
set: function(value) {
scope.$eval(expr + '=' + toJson(formatter['parse'](value)));
}
};
}
function domAccessor(element) {
var validatorName = element.attr('ng-validate') || NOOP,
validator = angularValidator(validatorName),
required = element.attr('ng-required'),
lastError;
required = required || required == '';
if (!validator) throw "Validator named '" + validatorName + "' not found.";
function validate(value) {
var error = required && !trim(value) ? "Required" : validator(value);
if (error !== lastError) {
if (error) {
element.addClass(NG_VALIDATION_ERROR);
element.attr(NG_ERROR, error);
} else {
element.removeClass(NG_VALIDATION_ERROR);
element.removeAttr(NG_ERROR);
}
lastError = error;
}
return value;
}
return {
get: function(){
return validate(element.attr(VALUE));
},
set: function(value){
element.attr(VALUE, validate(value));
}
};
}
var NG_ERROR = 'ng-error',
NG_VALIDATION_ERROR = 'ng-validation-error',
INPUT_META = {
'text': ["", 'keyup change']
};
angularWidget('INPUT', function input(element){
var meta = INPUT_META[lowercase(element.attr('type'))];
return meta ? function(element) {
var scope = scopeAccessor(this, element),
dom = domAccessor(element);
scope.set(dom.get() || meta[0]);
element.bind(meta[1], function(){
scope.set(dom.get());
});
this.$watch(scope.get, dom.set);
} : 0;
});
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
//widget related
//ng-validate, ng-required, ng-formatter

34
test/ValidatorsTest.js
View file

@ -26,7 +26,7 @@ ValidatorTest.prototype.testRegexp = function() {
};
ValidatorTest.prototype.testNumber = function() {
assertEquals(angular.validator.number("ab"), "Value is not a number.");
assertEquals(angular.validator.number("ab"), "Not a number");
assertEquals(angular.validator.number("-0.1",0), "Value can not be less than 0.");
assertEquals(angular.validator.number("10.1",0,10), "Value can not be greater than 10.");
assertEquals(angular.validator.number("1.2"), null);
@ -34,10 +34,10 @@ ValidatorTest.prototype.testNumber = function() {
};
ValidatorTest.prototype.testInteger = function() {
assertEquals(angular.validator.integer("ab"), "Value is not a number.");
assertEquals(angular.validator.integer("1.1"), "Value is not a whole number.");
assertEquals(angular.validator.integer("1.0"), "Value is not a whole number.");
assertEquals(angular.validator.integer("1."), "Value is not a whole number.");
assertEquals(angular.validator.integer("ab"), "Not a number");
assertEquals(angular.validator.integer("1.1"), "Not a whole number");
assertEquals(angular.validator.integer("1.0"), "Not a whole number");
assertEquals(angular.validator.integer("1."), "Not a whole number");
assertEquals(angular.validator.integer("-1",0), "Value can not be less than 0.");
assertEquals(angular.validator.integer("11",0,10), "Value can not be greater than 10.");
assertEquals(angular.validator.integer("1"), null);
@ -86,7 +86,7 @@ describe('Validator:asynchronous', function(){
var asynchronous = angular.validator.asynchronous;
var self;
var value, fn;
beforeEach(function(){
value = null;
fn = null;
@ -96,10 +96,10 @@ describe('Validator:asynchronous', function(){
$updateView: noop
};
});
it('should make a request and show spinner', function(){
var x = compile('<input name="name" ng-validate="asynchronous:asyncFn"/>')
var asyncFn = function(v,f){value=v; fn=f};
var x = compile('<input name="name" ng-validate="asynchronous:asyncFn"/>');
var asyncFn = function(v,f){value=v; fn=f;};
var input = x.node.find(":input");
x.scope.set("asyncFn", asyncFn);
x.scope.set("name", "misko");
@ -110,29 +110,29 @@ describe('Validator:asynchronous', function(){
expect(input.hasClass('ng-input-indicator-wait')).toBeFalsy();
expect(input.attr('ng-error')).toEqual("myError");
});
it("should not make second request to same value", function(){
asynchronous.call(self, "kai", function(v,f){value=v; fn=f;});
expect(value).toEqual('kai');
expect(self.$invalidWidgets).toEqual([self.$element]);
var spy = jasmine.createSpy();
asynchronous.call(self, "kai", spy);
expect(spy).wasNotCalled();
asynchronous.call(self, "misko", spy);
expect(spy).wasCalled();
expect(spy).wasCalled();
});
it("should ignore old callbacks, and not remove spinner", function(){
var firstCb, secondCb;
asynchronous.call(self, "first", function(v,f){value=v; firstCb=f;});
asynchronous.call(self, "second", function(v,f){value=v; secondCb=f;});
firstCb();
expect($(self.$element).hasClass('ng-input-indicator-wait')).toBeTruthy();
secondCb();
expect($(self.$element).hasClass('ng-input-indicator-wait')).toBeFalsy();
});
});
});

68
test/widgetsSpec.js
View file

@ -1,4 +1,4 @@
describe("widgets", function(){
describe("input widget", function(){
var compile, element, scope;
@ -15,14 +15,70 @@ describe("widgets", function(){
});
afterEach(function(){
if (element) {
element.remove();
}
if (element) element.remove();
expect(_(jqCache).size()).toEqual(0);
});
it('should fail', function(){
fail('iueoi');
it('should input-text auto init and handle keyup/change events', function(){
compile('<input type="Text" name="name" value="Misko"/>');
expect(scope.get('name')).toEqual("Misko");
scope.set('name', 'Adam');
scope.updateView();
expect(element.attr('value')).toEqual("Adam");
element.attr('value', 'Shyam');
element.trigger('keyup');
expect(scope.get('name')).toEqual('Shyam');
element.attr('value', 'Kai');
element.trigger('change');
expect(scope.get('name')).toEqual('Kai');
});
it("should process ng-format", function(){
compile('<input type="Text" name="list" value="a,b,c" ng-format="list"/>');
expect(scope.get('list')).toEqual(['a', 'b', 'c']);
scope.set('list', ['x', 'y', 'z']);
scope.updateView();
expect(element.attr('value')).toEqual("x, y, z");
element.attr('value', '1, 2, 3');
element.trigger('keyup');
expect(scope.get('list')).toEqual(['1', '2', '3']);
});
it("should process ng-validation", function(){
compile('<input type="text" name="price" value="abc" ng-validate="number"/>');
expect(element.hasClass('ng-validation-error')).toBeTruthy();
expect(element.attr('ng-error')).toEqual('Not a number');
scope.set('price', '123');
scope.updateView();
expect(element.hasClass('ng-validation-error')).toBeFalsy();
expect(element.attr('ng-error')).toBeFalsy();
element.attr('value', 'x');
element.trigger('keyup');
expect(element.hasClass('ng-validation-error')).toBeTruthy();
expect(element.attr('ng-error')).toEqual('Not a number');
});
it("should process ng-required", function(){
compile('<input type="text" name="price" ng-required/>');
expect(element.hasClass('ng-validation-error')).toBeTruthy();
expect(element.attr('ng-error')).toEqual('Required');
scope.set('price', 'xxx');
scope.updateView();
expect(element.hasClass('ng-validation-error')).toBeFalsy();
expect(element.attr('ng-error')).toBeFalsy();
element.attr('value', '');
element.trigger('keyup');
expect(element.hasClass('ng-validation-error')).toBeTruthy();
expect(element.attr('ng-error')).toEqual('Required');
});
});