在带有Breeze的基于角度的SPA中的Kendo DatePicker中进行验证

Question

I'm building a SPA with Angular. The backend is an ASP.NET MVC WebApi server. The Model is persisted with the help of Entity Framework. Breeze picks up the metadata offered by Entity Framework and transfers it to the SPA app in the browser.

In one form I'm using a Kendo DatePicker. It's configured with a german date format ("dd.MM.yyyy"). I also annotated the input tag with the data-z-validate attribute.

When someone enters an invalid date string I'm want to see the red warning tooltip with a validation error message. Unfortunately this does not happen. Even worse it seems that no validation is executed at all.

Do I need to add a custom validator on the client side? If so how do I do that?

Angular view:

<input kendo-date-picker id="aktion-termin" type="text" placeholder="Termin"
       k-ng-model="vm.aktion.termin" k-format="'dd.MM.yyyy'" 
       data-z-validate />

Model class:

public class Aktion
{

    ...

    [DataType(DataType.Date)]
    public DateTime? Termin { get; set; }

    ...    
}

Metadata:

"entityType":[

    {
        "name":"Aktion",

        ...

        "property":[

            ...

            {
                "name":"Termin",
                "type":"Edm.DateTime"
            },

            ...
        ],

        ...
    }

Additional Information

There is another field on the same form which is required. Here the validation works well. The validation error popup comes up when I leave the field empty. So the whole infrastructure seems to work generally. But it is a standard input field. No Kendo involved.

<input class="form-control" id="aktion-titel" placeholder="Name"
       data-ng-model="vm.aktion.titel" data-z-validate />

The said date field is also functional. When I enter a valid date string according to the given format (eg "02.01.2015") I can see the correct value in the database after a save command. I'm also able to see the inserted date in the JSON which is sent by Breeze to the server. Everthing works properly as long as the inserted date string satisfies the given date format.

{
    "$id":"1",
    "$type":"Breeze.ContextProvider.SaveResult, Breeze.ContextProvider",
    "Entities":[
        {
            "$id":"2",
            "$type":"Aktionen.Model.Aktion, Aktionen.Model",
            "Id":"a0b2639a-c79b-46ef-a5ee-6982dcbe1782",
            "Titel":"abc",
            "Termin":"2015-01-02T00:00:00.000+01:00",        // <----- ok

            ...
        },

        ...
    ],
    "KeyMappings":[

    ],
    "Errors":null
}

When I enter rubbish (eg "xyz") a null value is sent to the server. And a null is what I'm seeing in the database.

{
    "$id":"1",
    "$type":"Breeze.ContextProvider.SaveResult, Breeze.ContextProvider",
    "Entities":[
        {
            "$id":"2",
            "$type":"Aktionen.Model.Aktion, Aktionen.Model",
            "Id":"736f976c-9e3b-42ee-90a9-ca421b6c2843",
            "Titel":"The Name",
            "Termin":null,                                 // <------ bad

            ...
        },

        ...
    ],
    "KeyMappings":[

    ],
    "Errors":null
}

That is not exactly the behavior I had in mind. The application should inform the user about the invalid date by showing the validation popup. And it should not accept the record and it should not send it the the server.

When I bypass the kendo date picker by setting the date string programmatically I'm getting a validaton error from Breeze: "'termin' must be a date".

function save() {
    if (vm.isSaving) { return common.$q.when(null); }
    if (!canSave()) { return common.$q.when(null); }

    vm.aktion.termin = "xyz";    // <--------- rubbish

    vm.isSaving = true;
    return datacontext.save().then(function() {
        vm.isSaving = false;
    }, function () {
        vm.isSaving = false;
    });
}

When I debug this function I can see the values of the property vm.aktion.termin:

"01.01.2015" --> Thu Jan 01 2015 00:00:00 GMT+0100 (Mitteleuropäische Zeit)

"xzy" --> null

Given this output I assume that the kendo date picker spits out the date string only when the input is valid.

Answer 1

I'm not sure what HTML Kendo is actually generating around the date picker. I'll bet that z-validate can't recognize it; z-validate is kind of a prototype or proof-of-concept and it certainly wasn't designed w/ Kendo controls in mind.

Can you see if the new value is written through to the entity's date property? Also does Breeze validate the date when you set the property programmatically rather than through any UI binding? Let me know if you don't know how to test for that.

Answer 2

Kendo UI Controls intraduce a new k-ng-model directive which you are using for data binding instead of the default Angular ng-model . z-validate by default only recognizes ng-model .

See this Pull Request for z-validate which adds support for Kendo UI Controls to `z-validate.

It's up to @Ward for deciding if this fits in the default z-validate distribution or not, but you still can apply the PR to your used version of breeze.directives.js