diff --git a/lib/directive/ng_control.dart b/lib/directive/ng_control.dart index 70d065b62..155b79582 100644 --- a/lib/directive/ng_control.dart +++ b/lib/directive/ng_control.dart @@ -170,18 +170,23 @@ abstract class NgControl implements NgAttachAware, NgDetachAware { * error is real). */ updateControlValidity(NgControl ngModel, String errorType, bool isValid) { + String validClassName = errorType + '-valid'; + String invalidClassName = errorType + '-invalid'; + if (isValid) { if (errors.containsKey(errorType)) { Set errorsByName = errors[errorType]; errorsByName.remove(ngModel); if (errorsByName.isEmpty) { errors.remove(errorType); + element..removeClass(invalidClassName)..addClass(validClassName); } } if (errors.isEmpty) { valid = true; } } else { + element..removeClass(validClassName)..addClass(invalidClassName); errors.putIfAbsent(errorType, () => new Set()).add(ngModel); invalid = true; } diff --git a/test/directive/ng_form_spec.dart b/test/directive/ng_form_spec.dart index 6b4d8acff..6780ecf3b 100644 --- a/test/directive/ng_form_spec.dart +++ b/test/directive/ng_form_spec.dart @@ -529,6 +529,53 @@ void main() { })); }); + describe('validators', () { + it('should display the valid and invalid CSS classes on the element for each validation', + inject((TestBed _, Scope scope) { + + var form = _.compile( + '
' + ); + + scope.apply(); + + expect(form.classes.contains('ng-required-invalid')).toBe(true); + expect(form.classes.contains('ng-required-valid')).toBe(false); + + scope.apply(() { + scope.context['myModel'] = 'value'; + }); + + expect(form.classes.contains('ng-required-valid')).toBe(true); + expect(form.classes.contains('ng-required-invalid')).toBe(false); + })); + + it('should display the valid and invalid CSS classes on the element for custom validations', () { + module((Module module) { + module.type(MyCustomFormValidator); + }); + inject((TestBed _, Scope scope) { + var form = _.compile(''); + + scope.apply(); + + expect(form.classes.contains('custom-invalid')).toBe(true); + expect(form.classes.contains('custom-valid')).toBe(false); + + scope.apply(() { + scope.context['myModel'] = 'yes'; + }); + + expect(form.classes.contains('custom-valid')).toBe(true); + expect(form.classes.contains('custom-invalid')).toBe(false); + }); + }); + }); + describe('reset()', () { it('should reset the model value to its original state', inject((TestBed _) { _.compile('