In this post all will be extracting a data service from the code created in the previous posts and I will be adding some client side validation by using the breeze directive: data-z-validate.



All code can be found at:





Just by adding the data-z-validate attribute to the input elements in the grid, breeze will automatically show client side validation errors, by default an asterisk “*” is shown for required fields and a message is shown, when the user clears a required field.



In this case I also added a maxlength data annotation to the lastName field:




namespace Research.UI.Web.Server.Model
    using System.ComponentModel.DataAnnotations;

    public class Employee
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string PhoneNumber { get; set; }


I encountered a problem with the data-z-validate directive, this was caused by added the directive dynamically in a custom directive created by me, see: http://stackoverflow.com/questions/22849402/angular-directive-with-a-template-does-not-work-with-z-validate but this was fixed by altering my custom directive.


The custom directive with fix

// Angular directive [spaField] responsible for generating grid cell controls.
spa.app.directive('spaField', ['$compile', function ($compile)
    var directive = {
        restrict: 'A', /* Restrict this directive to attributes.  */
        replace: true, /* The given element will be replaced in the link function. */
        link: function ($scope, element, attrs)
            // The data-z-validate directive will append a [span class="z-decorator"] to the following [input] element, by using the jquery "append" function.
            var html = '<input ng-disabled="{{vm.isKeyField(prop)}}" type="text" data-ng-model="entity[prop.name]" data-z-validate>';

            if ($scope.prop.relatedNavigationProperty) {
                var relatedTableName = $scope.prop.relatedNavigationProperty.nameOnServer;
                html = '<select kendo-combo-box ng-model="entity[prop.name]" ng-options="record.id as record.firstName for record in vm[\'' + relatedTableName + '\']"></select>';
            } else if ($scope.prop.dataType.name === "DateTime") {
                html = '<input kendo-date-picker k-ng-model="entity[prop.name]" k-format="\'dd-MMM-yyyy\'" />';
            } else if ($scope.prop.dataType.name === "Boolean")
                html = '<input kendo-mobile-switch k-on-label="\'YES\'" k-off-label="\'NO\'" />';

            // Apply scope to the created html fragment.
            var compiled = $compile(html)($scope);

            // Get the [<span class="z-decorator"] appended to the input element by the z-validate directive.
            var span = compiled[0].parentNode.children[1];

            // The following 2 lines will only add the input element to the DOM and not the [span class="z-decorator"], that is added by the z-validate directive.
            element = compiled;

            // Add the [span class="z-decorator"] to the current parent element of the input element.
    return directive;

One Reply to “AngularJS and Breeze – A simple crud app – Part 4 – Extracting a data service and adding validation.”

  1. good ,very clear .
    we do need u heighlight and explain your dataservice and how to use z-validate to readers. that’s the key of this article.
    thank u!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.