Aurelia 验证不适用于对象属性

LSt*_*rky 3 aurelia

我无法让 Aurelia-Validate 处理我日历记录中的字段。

calendar.html(摘录)

<form>
  <div class="form-group">
    <label class="control-label" for="cal_name_orig">Calendar name</label>
    <input type="text" class="form-control" id="cal_name_orig" value.bind="calendar.cal_name_orig & validate">
  </div>
  <div class="form-group">
    <label class="control-label" for="cal_name_tran">Translated name</label>
    <input type="text" class="form-control" id="cal_name_tran" value.bind="calendar.cal_name_tran & validate">
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

calendars.js(简化版):

import { inject, NewInstance } from 'aurelia-dependency-injection';
import { ValidationController, ValidationRules } from 'aurelia-validation';
import { BootstrapFormRenderer } from '../../common/bootstrap-form-renderer';

@inject(NewInstance.of(ValidationController))
export class CalendarForm {
  controller = null;

  constructor(controller) {
    this.controller = controller;
    this.controller.addRenderer(new BootstrapFormRenderer());
    this.calendar = {
      cal_name_orig = "",
      cal_name_tran = ""
    }
  }

  validateCalendar() {
    let v = this.controller.validate();
    console.log(v);
  }

}

ValidationRules
  .ensure('calendar.cal_name_orig').required().minLength(5).maxLength(20)
  .ensure('calendar.cal_name_tran').minLength(5).maxLength(20)
  .on(CalendarForm);
Run Code Online (Sandbox Code Playgroud)

如果我的变化value.bind="calendar.cal_name_orig & validate",以value.bind="cal_name_orig & validate".ensure('calendar.cal_name_orig').ensure('cal_name_orig'),验证工作,并在表格上呈现(但数据不绑定到这个类中的数据的右侧部分。

如何让 Aurelia Validate 识别 calendar.cal_name_orig?

LSt*_*rky 5

解决方案是将 ValidationRules 移动到类中constructor()并将最后一行更改为on(this.calendar). 我还需要calendar.从每个确保规则中删除。

ValidationRules
  .ensure('cal_name_orig').required().minLength(5).maxLength(20)
  .ensure('cal_name_tran').required().minLength(5).maxLength(20)
  .on(this.calendar);
Run Code Online (Sandbox Code Playgroud)