Question

我正在使用Angular构建SPA。后端是ASP.NET MVC WebApi服务器。模型是在Entity Framework的帮助下持久化。 Breeze选择了提供的元数据实体框架并将其传输到浏览器中的SPA应用程序。

在一种形式中，我使用的是Kendo DatePicker。它配置了德国日期格式（“dd.MM.yyyy”）。我还使用data-z-validate属性注释了输入标记。

当有人输入无效的日期字符串时，我希望看到带有a的红色警告工具提示验证错误消息。不幸的是，这不会发生。更糟糕的是，似乎没有验证完全执行。

我是否需要在客户端添加自定义验证器？如果是这样，我该怎么做？

角度观点：

<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 />

模特课：

public class Aktion
{

    ...

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

    ...    
}

元数据：

"entityType":[

    {
        "name":"Aktion",

        ...

        "property":[

            ...

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

            ...
        ],

        ...
    }

其他信息

在同一表格上还有另一个字段是必需的。验证效果很好。验证当我将字段留空时出现错误弹出窗口。因此整个基础设施似乎普遍起作用。但它是标准输入字段。没有剑道参与。

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

上述日期字段也是有效的。当我根据给定的格式输入有效的日期字符串时（例如“02.01.2015”）我可以在save命令后看到数据库中的正确值。我也能看到 Jreeze中发送到服务器的JSON中的插入日期。只要能够正常工作，它就能正常工作插入的日期字符串满足给定的日期格式。

{
    "$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
}

当我输入垃圾（例如“xyz”）时，会向服务器发送空值。我看到的是null 数据库。

{
    "$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
}

这并不是我想到的行为。应用程序应通知用户有关无效的信息通过显示验证弹出窗口显示日期。它不应该接受记录，也不应该将其发送到服务器。

当我通过以编程方式设置日期字符串来绕过kendo日期选择器时，我收到了一个验证错误微风：“'终点'必须是约会”。

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;
    });
}

当我调试此函数时，我可以看到属性vm.aktion.termin的值：

“01.01.2015” - ＆gt; 2015年1月1日星期四00:00:00 GMT + 0100（MitteleuropäischeZeit）

“xzy” - ＆gt;空

鉴于此输出，我假设剑道日期选择器仅在输入时吐出日期字符串有效的。

Answer 1

我不确定HTML Kendo在日期选择器周围实际生成了什么。我敢打赌，z-validate无法识别它; z-validate是一种原型或概念验证，它当然没有设计w / Kendo控件。

您能看到新值是否写入实体的日期属性？当您以编程方式设置属性而不是通过任何UI绑定时，Breeze也会验证日期吗？如果您不知道如何测试，请告诉我。

Answer 2

Kendo UI Controls会引导您用于数据绑定的新k-ng-model指令，而不是默认的Angular ng-model。默认情况下，z-validate仅识别ng-model。

请参阅此Pull Request了解z-validate，它将对Kendo UI控件的支持添加到`z-validate。

由@Ward决定是否适合默认z-validate发布，但您仍然可以将PR应用于您使用的breeze.directives.js

版本

使用Breeze在基于Angular的SPA中进行Kendo DatePicker验证

2 个答案: