This repository has been archived by the owner on Nov 24, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): Introduce valdr-enabled directive
Allows to dynamically enable and disable the validation with valdr for one or multiple form elements. closes #54, fixes #55
- Loading branch information
Showing
5 changed files
with
213 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| angular.module('valdr') | ||
|
|
||
| /** | ||
| * This directive allows to dynamically enable and disable the validation with valdr. | ||
| * All form elements in a child node of an element with the 'valdr-enabled' directive will be affected by this. | ||
| * | ||
| * Usage: | ||
| * | ||
| * <div valdr-enabled="isValidationEnabled()"> | ||
| * <input type="text" name="name" ng-model="mymodel.field"> | ||
| * </div> | ||
| * | ||
| * If multiple valdr-enabled directives are nested, the one nearest to the validated form element | ||
| * will take precedence. | ||
| */ | ||
| .directive('valdrEnabled', ['valdrEvents', function (valdrEvents) { | ||
| return { | ||
| controller: ['$scope', '$attrs', function($scope, $attrs) { | ||
| $scope.$watch($attrs.valdrEnabled, function () { | ||
| $scope.$broadcast(valdrEvents.revalidate); | ||
| }); | ||
|
|
||
| this.isEnabled = function () { | ||
| var evaluatedExpression = $scope.$eval($attrs.valdrEnabled); | ||
| return evaluatedExpression === undefined ? true : evaluatedExpression; | ||
| }; | ||
| }] | ||
| }; | ||
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| describe('valdrEnabled directive', function () { | ||
|
|
||
| // VARIABLES | ||
|
|
||
| var $scope, $compile, element, valdr, ngModelController, template, | ||
| personConstraints = { | ||
| 'Person': { | ||
| 'firstName': { | ||
| 'required': { | ||
| 'message': 'first name is required' | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| // TEST UTILITIES | ||
|
|
||
| function compileValdrEnabledTemplate() { | ||
| element = $compile(angular.element(template))($scope); | ||
| $scope.$digest(); | ||
| ngModelController = element.find('input').controller('ngModel'); | ||
| } | ||
|
|
||
| beforeEach(function () { | ||
| module('valdr'); | ||
| }); | ||
|
|
||
| beforeEach(inject(function ($rootScope, _$compile_, _valdr_) { | ||
| $compile = _$compile_; | ||
| valdr = _valdr_; | ||
|
|
||
| template = | ||
| '<form valdr-type="Person" valdr-enabled="isValdrEnabled()">' + | ||
| '<input type="text" name="firstName" ng-model="person.firstName">' + | ||
| '</form>'; | ||
|
|
||
| $scope = $rootScope.$new(); | ||
|
|
||
| $scope.person = { }; | ||
| $scope.valdrEnabled = true; | ||
| $scope.isValdrEnabled = function () { | ||
| return $scope.valdrEnabled; | ||
| }; | ||
|
|
||
| valdr.addConstraints(personConstraints); | ||
| })); | ||
|
|
||
| // TEST | ||
|
|
||
| it('should validate if valdrEnabled is true', function () { | ||
| // given | ||
| $scope.valdrEnabled = true; | ||
|
|
||
| // when | ||
| compileValdrEnabledTemplate(); | ||
|
|
||
| // then | ||
| expect(ngModelController.$valid).toBe(false); | ||
| }); | ||
|
|
||
| it('should not validate if valdrEnabled is false', function () { | ||
| // given | ||
| $scope.valdrEnabled = false; | ||
|
|
||
| // when | ||
| compileValdrEnabledTemplate(); | ||
|
|
||
| // then | ||
| expect(ngModelController.$valid).toBe(true); | ||
| }); | ||
|
|
||
| it('should validate if no expression is provided', function () { | ||
| // given | ||
| template = | ||
| '<form valdr-type="Person" valdr-enabled>' + | ||
| '<input type="text" name="firstName" ng-model="person.firstName">' + | ||
| '</form>'; | ||
|
|
||
| // when | ||
| compileValdrEnabledTemplate(); | ||
|
|
||
| // then | ||
| expect(ngModelController.$valid).toBe(false); | ||
| }); | ||
|
|
||
| it('should remove errors when constraints are removed', function () { | ||
| // given | ||
| compileValdrEnabledTemplate(); | ||
|
|
||
| // when | ||
| valdr.removeConstraints('Person'); | ||
|
|
||
| // then | ||
| expect(ngModelController.$valid).toBe(true); | ||
| }); | ||
|
|
||
| it('should remove errors when valdr gets disabled', function () { | ||
| // given | ||
| compileValdrEnabledTemplate(); | ||
|
|
||
| // when | ||
| $scope.$apply(function () { | ||
| $scope.valdrEnabled = false; | ||
| }); | ||
|
|
||
| // then | ||
| expect(ngModelController.$valid).toBe(true); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters