Skip to content

Commit 39de108

Browse files
vicbvicb
committed
feat(form): Add support for input[type=color]
Closes dart-archive#611
1 parent 5ef596d commit 39de108

8 files changed

+105
-5
lines changed

‎example/web/hello_world.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:angular/application_factory.dart';
66
publishAs: 'ctrl')
77
class HelloWorld {
88
String name = "world";
9+
String color = "#aaaaaa";
910
}
1011

1112
main() {

‎example/web/hello_world.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
</head>
66
<body hello-world-controller>
77

8-
<h3>Hello {{ctrl.name}}!</h3>
9-
name: <input type="text" ng-model="ctrl.name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }">
8+
<h3 ng-style="{color:ctrl.color}">Hello {{ctrl.name}}!</h3>
9+
Name: <input type="text" ng-model="ctrl.name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }" />
10+
Color: <input type="color" ng-model="ctrl.color"/>
1011

1112
<script type="application/dart" src="hello_world.dart"></script>
1213
<script src="packages/browser/dart.js"></script>

‎lib/directive/module.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,6 @@ class DirectiveModule extends Module {
118118
bind(NgModelPatternValidator, toValue: null);
119119
bind(NgModelMinLengthValidator, toValue: null);
120120
bind(NgModelMaxLengthValidator, toValue: null);
121+
bind(NgModelColorValidator, toValue: null);
121122
}
122123
}

‎lib/directive/ng_model.dart

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ class InputCheckbox {
332332
*
333333
* **Usage**
334334
*
335-
* <input type="text|url|password|email|search|tel" ng-model="myModel">
335+
* <input type="text|url|password|email|search|tel|color" ng-model="myModel">
336336
* <textarea ng-model="myModel"></textarea>
337337
*
338338
* When the `ng-model` attribute is present on the input element,
@@ -348,6 +348,7 @@ class InputCheckbox {
348348
@Decorator(selector: 'input[type=email][ng-model]')
349349
@Decorator(selector: 'input[type=search][ng-model]')
350350
@Decorator(selector: 'input[type=tel][ng-model]')
351+
@Decorator(selector: 'input[type=color][ng-model]')
351352
class InputTextLike {
352353
final dom.Element inputElement;
353354
final NgModel ngModel;
@@ -707,7 +708,7 @@ class NgValue {
707708

708709
@NgOneWay('ng-value')
709710
void set value(val) {
710-
this._value = val;
711+
_value = val;
711712
}
712713
dynamic get value => _value == null ? (element as dynamic).value : _value;
713714
}

‎lib/directive/ng_model_validators.dart

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,22 @@ class NgModelUrlValidator implements NgValidator {
6868
modelValue == null || modelValue.isEmpty || URL_REGEXP.hasMatch(modelValue);
6969
}
7070

71+
/**
72+
* Validates the model to see if its contents match a valid color pattern.
73+
*/
74+
@Decorator(selector: 'input[type=color][ng-model]')
75+
class NgModelColorValidator implements NgValidator {
76+
static final COLOR_REGEXP = new RegExp(r'^#[0-9a-f]{6}$', caseSensitive: false);
77+
final String name = 'ng-color';
78+
79+
NgModelColorValidator(NgModel ngModel) {
80+
ngModel.addValidator(this);
81+
}
82+
83+
bool isValid(modelValue) =>
84+
modelValue == null || modelValue.isEmpty || COLOR_REGEXP.hasMatch(modelValue);
85+
}
86+
7187
/**
7288
* Validates the model to see if its contents match a valid email pattern.
7389
*/

‎test/angular_spec.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ main() {
187187
"angular.directive.NgInclude",
188188
"angular.directive.NgModel",
189189
"angular.directive.NgModelOptions",
190+
"angular.directive.NgModelColorValidator",
190191
"angular.directive.NgModelConverter",
191192
"angular.directive.NgModelEmailValidator",
192193
"angular.directive.NgModelMaxLengthValidator",

‎test/directive/ng_model_spec.dart

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1101,6 +1101,60 @@ void main() {
11011101
});
11021102
});
11031103

1104+
describe('type="color"', () {
1105+
it('should update input value from model', () {
1106+
_.compile('<input type="color" ng-model="model">');
1107+
_.rootScope.apply();
1108+
1109+
expect((_.rootElement as dom.InputElement).value).toEqual('#000000');
1110+
1111+
_.rootScope.apply('model = "#123456"');
1112+
expect((_.rootElement as dom.InputElement).value).toEqual('#123456');
1113+
});
1114+
1115+
it('should render as #000000 on default and when a null value is present', () {
1116+
_.compile('<input type="color" ng-model="model">');
1117+
_.rootScope.apply();
1118+
1119+
expect((_.rootElement as dom.InputElement).value).toEqual('#000000');
1120+
1121+
_.rootScope.apply('model = null');
1122+
expect((_.rootElement as dom.InputElement).value).toEqual('#000000');
1123+
});
1124+
1125+
it('should update model from the input value', () {
1126+
_.compile('<input type="color" ng-model="model" probe="p">');
1127+
Probe probe = _.rootScope.context['p'];
1128+
var ngModel = probe.directive(NgModel);
1129+
InputElement inputElement = probe.element;
1130+
1131+
inputElement.value = '#000000';
1132+
_.triggerEvent(inputElement, 'change');
1133+
expect(_.rootScope.context['model']).toEqual('#000000');
1134+
1135+
inputElement.value = '#ffffff';
1136+
var input = probe.directive(InputTextLike);
1137+
input.processValue();
1138+
expect(_.rootScope.context['model']).toEqual('#ffffff');
1139+
});
1140+
1141+
it('should only render the input value upon the next digest', (Scope scope) {
1142+
_.compile('<input type="color" ng-model="model" probe="p">');
1143+
Probe probe = _.rootScope.context['p'];
1144+
var ngModel = probe.directive(NgModel);
1145+
InputElement inputElement = probe.element;
1146+
1147+
ngModel.render('#aabbcc');
1148+
scope.context['model'] = '#aabbcc';
1149+
1150+
expect(inputElement.value).not.toEqual('#aabbcc');
1151+
1152+
scope.apply();
1153+
1154+
expect(inputElement.value).toEqual('#aabbcc');
1155+
});
1156+
});
1157+
11041158
describe('contenteditable', () {
11051159
it('should update content from model', () {
11061160
_.compile('<p contenteditable ng-model="model">');

‎test/directive/ng_model_validators_spec.dart

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,31 @@ void main() {
111111
});
112112
});
113113

114+
describe('[type="color"]', () {
115+
it('should validate the input field given a valid or invalid color', (RootScope scope) {
116+
_.compile('<input type="color" ng-model="val" probe="i" />');
117+
Probe probe = _.rootScope.context['i'];
118+
var model = probe.directive(NgModel);
119+
120+
expect(model.valid).toEqual(true);
121+
expect(model.invalid).toEqual(false);
122+
123+
_.rootScope.apply(() {
124+
_.rootScope.context['val'] = 'red';
125+
});
126+
127+
expect(model.valid).toEqual(false);
128+
expect(model.invalid).toEqual(true);
129+
130+
_.rootScope.apply(() {
131+
_.rootScope.context['val'] = '#ff0000';
132+
});
133+
134+
expect(model.valid).toEqual(true);
135+
expect(model.invalid).toEqual(false);
136+
});
137+
});
138+
114139
describe('[type="email"]', () {
115140
it('should validate the input field given a valid or invalid email address', (RootScope scope) {
116141
_.compile('<input type="email" ng-model="val" probe="i" />');
@@ -627,6 +652,6 @@ void main() {
627652

628653
expect(model.valid).toBe(true);
629654
});
630-
});
655+
});
631656
});
632657
}

0 commit comments

Comments
 (0)