Got further with pre-value editors and strongly typed stuff, got the pre-value editor for drop down list working and saving array objects. Now need to wire that up to the editor but think i need to change how the drop down list displays it's values.

src/Umbraco.Web.UI.Client/src/common/directives/valHighlight.directive.js

@@ -0,0 +1,30 @@
+/**
+* @ngdoc directive
+* @name umbraco.directives.directive:valHighlight
+* @restrict A
+* @description Used on input fields when you want to signal that they are in error, this will highlight the item for 1 second
+**/
+function valHighlight($timeout) {
+    return {
+        restrict: "A",
+        link: function (scope, element, attrs, ctrl) {
+            
+            scope.$watch(function() {
+                return scope.$eval(attrs.valHighlight);
+            }, function(newVal, oldVal) {
+                if (newVal === true) {
+                    element.addClass("highlight-error");
+                    $timeout(function () {
+                        //set the bound scope property to false
+                        scope[attrs.valHighlight] = false;
+                    }, 1000);
+                }
+                else {
+                    element.removeClass("highlight-error");
+                }
+            });
+   
+        }
+    };
+}
+angular.module('umbraco.directives').directive("valHighlight", valHighlight);

src/Umbraco.Web.UI.Client/src/less/forms.less

@@ -399,6 +399,16 @@ input[type="checkbox"][readonly] {
 }
 
 
+input.highlight-error,
+select.highlight-error,
+textarea.highlight-error {
+  border-color: #953b39 !important;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+}
+
+
 // FORM ACTIONS
 // ------------
 

src/Umbraco.Web.UI.Client/src/less/mixins.less

@@ -198,9 +198,6 @@
   }
 }
 
-
-
-
 // CSS3 PROPERTIES
 // --------------------------------------------------
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdown/dropdown.prevalue.controller.js

@@ -0,0 +1,33 @@
+angular.module("umbraco").controller("Umbraco.Editors.DropdownPreValueController",
+    function ($scope, $timeout) {
+       
+        $scope.newItem = "";
+        $scope.hasError = false;
+
+        $scope.remove = function(item, evt) {
+
+            evt.preventDefault();
+
+            $scope.model.value = _.reject($scope.model.value, function(i) {
+                return i === item;
+            });
+        };
+
+        $scope.add = function (evt) {
+            
+            evt.preventDefault();
+            
+            if (!_.contains($scope.model.value, $scope.newItem)) {
+                if ($scope.newItem) {
+                    $scope.model.value.push($scope.newItem);
+                    $scope.newItem = "";
+                    $scope.hasError = false;
+                    return;
+                }
+            }
+
+            //there was an error, do the highlight (will be set back by the directive)
+            $scope.hasError = true;            
+        };
+
+    });

src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdown/dropdown.prevalue.html

@@ -1,5 +1,13 @@
-<div>
-    
-    <input type="text" ng-model="model.value" />
+<div ng-controller="Umbraco.Editors.DropdownPreValueController">
+    <ul class="unstyled">
+        <li>
+            <input name="newItem" type="text" ng-model="newItem" val-highlight="hasError" />
+            <button class="btn" ng-click="add($event)">Add</button>
+        </li>
+        <li ng-repeat="item in model.value">
+            <input type="text" ng-model="item" />
+            <button class="btn" ng-click="remove(item, $event)">Remove</button>
+        </li>
+    </ul>
 </div>