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.

Note

All code can be found at:

https://github.com/roelvanlisdonk/Research/tree/master/Research/Research.UI.Web/Client/Features/AngularJS_and_Breeze/Part4

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:

Model

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

    public class Employee
    {
        [Key]
        public int Id { get; set; }
        [Required]
        [MaxLength(20)]
        public string FirstName { get; set; }
        [Required]
        [MaxLength(50)]
        public string LastName { get; set; }
        [MaxLength(20)]
        public string PhoneNumber { get; set; }
    }
}

Note

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.replaceWith(compiled);
            element = compiled;

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