Aurelia验证不适用于对象属性 [英] Aurelia Validation not working with object properties

问题描述

我无法让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>

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

如果将value.bind="calendar.cal_name_orig & validate"更改为value.bind="cal_name_orig & validate"，将.ensure('calendar.cal_name_orig')更改为.ensure('cal_name_orig')，则验证将在表单上进行并呈现(但数据未绑定到此类中数据的正确部分./p>

我如何获得Aurelia验证以识别calendar.cal_name_orig?

解决方案

解决方案是将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);

I can't get Aurelia-Validate to work on the fields in my calendar record.

calendar.html (excerpt)

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

calendars.js (simplified):

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

If I change value.bind="calendar.cal_name_orig & validate" to value.bind="cal_name_orig & validate" and .ensure('calendar.cal_name_orig') to .ensure('cal_name_orig'), the validation works and renders on the form (but the data doesn't bind to the right part of the data in this class.

How can I get Aurelia Validate to recognize calendar.cal_name_orig?

解决方案

The solution was to move ValidationRules into the class constructor() and change the last line to on(this.calendar). I also needed to remove the calendar. from each of the ensure rules.

ValidationRules
  .ensure('cal_name_orig').required().minLength(5).maxLength(20)
  .ensure('cal_name_tran').required().minLength(5).maxLength(20)
  .on(this.calendar);

这篇关于Aurelia验证不适用于对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！