Question

我正在为我的新应用程序使用Aurelia框架，我在配置和使用aurelia验证插件时遇到问题，我有一个服务器返回的json对象，根据复选框列表中的某些选择，我必须通过json对象的子集通过compose元素到子视图。不知何故，我无法理解如何根据我发现的示例正确配置它，我无法验证子视图中的输入元素。这是下面的json示例

  var selectedTopicValues={ "Contact":"",
  "billing": {
    "Quantity": {
      "TicketFieldTypeID": 2,
      "TicketTopicID": 7,
      "Value": [
        "Quantity"
      ],
      "Required": true,
      "DisplayName": "Quantity"
    },
    "SameasContact": {
      "TicketFieldTypeID": 9,
      "TicketTopicID": 7,
      "Value": [],
      "Required": true,
      "DisplayName": "Same as contact",
      "IsActive": false
    }
  },
  "coupencoderequest": {
    "RequestType": {
      "TicketFieldTypeID": 2,
      "TicketTopicID": 7,
      "Value": [
        ""
      ],
      "Required": true,
      "DisplayName": "Request Type"
    }
  }
};

如果用户选择计费，那么我需要通过使用compose并将其绑定到model.bind属性来将计费相关对象传递给子视图。验证需要在“值”属性上完成。例如：“billing.Quantity.Value”。

当用户点击main-view.html

中的保存按钮时，应触发验证

单击保存

时，下面配置的输入元素有效

 <md-input md-label="First Name" md-validate="true" value.bind="selectedTopicValues.Contact & validate:rules"></md-input>

下面的那个不起作用，这个元素出现在子视图

中

<md-input md-label="Quantity"   md-value.bind="billing.Quantity.Value & validate:rules"  md-text-area="true"> </md-input>

parentview.ts

    import {inject, customElement,NewInstance} from 'aurelia-framework';
    import {Validator,ValidationController,ValidationRules} from 'aurelia-validation';

    import { MaterializeFormValidationRenderer } from 'aurelia-materialize-bridge';

    @inject(Validator,ticketModel,ValidationController)
    export class parentview {
selectedTopicValues={}//json 
    constructor(validator,controller:ValidationController) {


    this.controller=controller;
    this.controller.addRenderer(new MaterializeFormValidationRenderer());
    this.addRules();
    }

    AddRules()
      {
        this.rules.push(ValidationRules.ensure('Contact').required().rules[0]);
        let rules1=[];
        jQuery.each(this.selectedTopicValues, function (key, data) {

        jQuery.each(data, function (index, data2) {

          rules1.push(ValidationRules
        .ensure(key+"."+data2.DisplayName+".Value")
          .required().rules[0]);
        })
    });
    this.rules.push(rules1);

    this.controller.addObject(this.selectedTopicValues,this.rules);

      }

     save() {
       console.log(this.selectedTopicValues);
      var v=  this.controller.validate({object:this.selectedTopicValues,rules:this.rules}).then(v => {
          if (v.length === 0) {
            console.log( 'All is good!');
          } else {

            console.log( 'You have errors!'+ v.length);
          }
        });;
      console.log(v);
      }
}

我需要一些关于动态json对象验证的帮助或指导。提前谢谢。

Answer 1

主要问题是动态属性访问器：.ensure(key+"."+data2.DisplayName+".Value").

让我们假设您生成的第一条规则billing.Quantity.Value。

您期望它做什么： selectedTopicValues["billing"]["Quantity"]["Value"]

真正的作用：selectedTopicValues["billing.Quantity.Value"]（显然不存在具有该名称的单个属性）

起初我对此感到有些惊讶，因为aurelia-binding会将访问器中的句点解析为嵌套表达式。因此，这种行为实际上与普通PropertyObserver

更加一致

据推测，这是出错的地方（第108行）：https://github.com/aurelia/validation/blob/master/src/implementation/standard-validator.ts

但是，应该可以，所以我想我会为此提交功能请求。

解决方案

我试过这个似乎有效：

public addRules() {
    this.rules.push(...ValidationRules.ensure("Contact").required().on(this.selectedTopicValues).rules);

    jQuery.each(this.selectedTopicValues, (index1, value1) => {

        jQuery.each(value1, (index2, value2) => {

            if (value2.Required) {
                this.rules.push(...ValidationRules
                    .ensure("Value") // .ensure(x => x.Value) is also possible
                    .displayName(value2.DisplayName)
                    .required()
                    .on(value2)
                    .rules);
            }
        })
    });

    this.controller.addObject(this.selectedTopicValues, this.rules);
}

观点：

<md-input md-label="First Name" md-validate="true" md-value.two-way="selectedTopicValues.Contact & validate:rules"></md-input>
<md-input md-label="Quantity" md-validate="true" md-value.two-way="selectedTopicValues.billing.Quantity.Value & validate:rules"  md-text-area="true"> </md-input>

我改变了什么：

直接传递＆＃34; leaf对象＆＃34; （实际上包含Value属性）通过.on()
使用... spread operator将所有规则添加到平面列表
使用JSON中的更多信息（假设您无论如何都试图进入该方向）
将视图中的绑定声明更改为显式two-way（否则，按惯例在two-way元素内时，它们只会是form

当底层对象发生更改时，可能需要进行一些额外的清理和/或绑定刷新。如果没有看到实际的代码，我无法判断。

aurelia验证动态json对象

1 个答案: