Angular Xeditable

Angular Xeditable - 使用onbeforesave事件无法获得正确的验证值(Angular Xeditable - can't get correct value for validation using onbeforesave event)

我正在尝试将验证逻辑添加到我们使用的消息格式值的编辑中。 我在这里创建了一个蹲点来展示这个问题。 这是用于大括号验证的代码。

vm.formatCheck = function (resource) { console.log(resource.Value); if (resource.Value.indexOf('{') > -1 || resource.Value.indexOf('}') > -1) { var x = resource.Value.split('{').length - 1; var y = resource.Value.split('}').length - 1; if ((x + y) % 2 === 1) { alert("Incorrect Message format"); return; } } };

示例：如果编辑第一个值（ {JobRole} for {Organisation} ）并删除{JobRole} for {Organisation}

alert("Incorrect Message format"); 永远不会显示，因为它获得了{JobRole} for {Organisation}的原始值 - {JobRole} for {Organisation}没有{JobRole} for {Organisation

如果我将验证逻辑移动到onaftersave事件，我会得到正确的值和验证，但它会显示/保存不正确的值，这是我不想要的。 那我怎么能解决这个问题呢？ 任何帮助赞赏。

不确定我是否可以使用延迟，承诺解决这个问题 - 但不确定是否可以使用Angular Xeditable？

I am trying to add validation logic to the editing of message format values we use. I have created plunker here to show the issue. Here is the code for the curly brace validation.

vm.formatCheck = function (resource) { console.log(resource.Value); if (resource.Value.indexOf('{') > -1 || resource.Value.indexOf('}') > -1) { var x = resource.Value.split('{').length - 1; var y = resource.Value.split('}').length - 1; if ((x + y) % 2 === 1) { alert("Incorrect Message format"); return; } } };

Example: If you edit the first value ({JobRole} for {Organisation}) and remove the trailing curly brace ({JobRole} for {Organisation)

The alert("Incorrect Message format"); never shows because it gets the original value - {JobRole} for {Organisation} and not {JobRole} for {Organisation

If I move the validation logic to the onaftersave event I get the correct value and validation fires, but it will show/save the incorrect value, which I do not want. So how can I get around this? Any help appreciated.

Not sure if I could use defer, promise to resolve this - but not sure if even possible with Angular Xeditable?

最满意答案

这是我的运转者： Plunker

基本上，我将你的HTML更改为：

<a href="#" e-name="resource" editable-textarea="res.Value" e-rows="5" e-cols="30" onbeforesave="vm.formatCheck($data)" onaftersave="vm.onGridItemChanged(res)">{{ res.Value || 'empty' }}</a></a>

我传递的是$数据而不是'res'。 $ data是您实际更改的对象属性的值。

在控制器中，你的验证功能。 '资源'现在是$ data，其中包含您尝试更改的财产的价值。 所以你检查它，并且你返回一个错误信息。 如果您不希望在字段旁边显示错误消息，请返回“”;

vm.formatCheck = function (resource) { console.log(resource); if (resource.indexOf('{') > -1 || resource.indexOf('}') > -1) { var x = resource.split('{').length - 1; var y = resource.split('}').length - 1; if ((x + y) % 2 === 1) { alert("Incorrect Message format"); return "Incorrect Message format"; } } };

Here is my plunker with it working: Plunker

Basically, I changed your html to this:

<a href="#" e-name="resource" editable-textarea="res.Value" e-rows="5" e-cols="30" onbeforesave="vm.formatCheck($data)" onaftersave="vm.onGridItemChanged(res)">{{ res.Value || 'empty' }}</a></a>

I'm passing $data instead of the 'res'. $data is the value of the object property you are actually changing.

And in the controller, your validation function. 'Resource' is now the $data which contains the value of your property you are trying to change. So you check it, and you return an error message. If you don't want a error message to show up next to the field return "";

vm.formatCheck = function (resource) { console.log(resource); if (resource.indexOf('{') > -1 || resource.indexOf('}') > -1) { var x = resource.split('{').length - 1; var y = resource.split('}').length - 1; if ((x + y) % 2 === 1) { alert("Incorrect Message format"); return "Incorrect Message format"; } } };