Nibble

Advanced property editors for Umbraco v7, Validation

Look at the following example prop editor (it’s basically a port of the sample todo app on the http://angularjs.org/ homepage, a bit simplified to focus on the important bits)

image

So in this case the prop editor contains a form that will add items to a array/list

The controller

angular.module("umbraco").controller("SampleValidationController",
        function ($scope) {
 
         if(!(Object.prototype.toString.call($scope.model.value) === ‘[object Array]’)){
             $scope.model.value = new Array();
         }
 
         $scope.addTodo = function() {
            $scope.model.value.push({text:$scope.todoText, done:false});
            $scope.todoText = ;
          };
 
        });

The View

 <div ng-controller="SampleValidationController">
 
         <ul class="unstyled">
           <li ng-repeat="todo in model.value">
             <input type="checkbox" ng-model="todo.done">
             <span class="done-{{todo.done}}">{{todo.text}}</span>
           </li>
         </ul>
         <form ng-submit="addTodo()">
           <input type="text" ng-model="todoText"  size="30"
                  placeholder="add new todo here">
           <input class="btn-primary" type="submit" value="add">
      </form>
 
 </div>

Of course when people click the add we want to make sure not to add an empty item to the list….

So the easiest would be to add a required attribute to the text input.. that works

image

but doing that will interfere with the page publish

image

And that’s not what we want… so the validation only needs to happen when we hit the add not publish…

So we’ll need to create a variable in our controller that will hold the validation state (initially set this to false and the manually check if we want to proceed and change the value of the validation state…)

angular.module("umbraco").controller("SampleValidationController",
        function ($scope) {
 
        $scope.hasError = false;
 
         if(!(Object.prototype.toString.call($scope.model.value) === ‘[object Array]’)){
             $scope.model.value = new Array();
         }
 
         $scope.addTodo = function() {
            if($scope.todoText)
            {
                $scope.model.value.push({text:$scope.todoText, done:false});
                $scope.todoText = ;
                $scope.hasError = false;
            }
            else
            {
                $scope.hasError = true;
            }
          };
 
        });

 

In our view we can now use a custom directive to show a bit of feedback to the user val-highlight="hasError" (of course passing in the variable name) and getting rid of the required

<input type="text" ng-model="todoText"  size="30"
                  placeholder="add new todo here" val-highlight="hasError">

So now when I try to hit the add without filling in a value I’ll get a red border for a couple of seconds

image

And we don’t interfere with the page publish validation…

Leave a Reply