Проверка Aurelia на динамически построенной форме

Question

Я создаю пользовательский элемент, который динамически генерирует пользовательскую форму ввода. Пока он работает достаточно хорошо, но у меня возникают проблемы с настройкой Aurelia-Validation на него и нужна помощь.

мой-form.html

<div class="form-group" repeat.for="control of controls"> 
    <label>${control.label}</label> 
    <div> 
    <compose containerless 
     view-model="resources/elements/${control.type}/${control.type}" 
     model.bind="{'control': control, 'model': model, 'readonly': readonly}" 
     class="form-control"></compose> 
    </div> 
</div> 

У меня есть несколько различных control.type «s доступен и работает (my-textbox, my-dropdown, my-datepicker) - каждый из них является пользовательским элементом. Например:

Пример управления (мой-textbox.html) вид

<template> 
    <input type="text" 
    class="form-control" 
    value.bind="model[control.bind] & validate"> 
</template> 

Родитель:

<my-form controls.bind="controls" model.bind="model" if.bind="controls"></my-form> 

Родитель вид-модель:

controls = [ 
    {label: 'Username', type: 'my-textbox', bind: 'user_username'}, 
    {label: 'Status', type: 'my-dropdown', bind: 'user_status', enum: 'ActiveInactive', default: '(Choose)'}, 
    {label: 'Last_login', type: 'my-datepicker', bind: 'user_lastlogin', vc: 'date'}]; 

ValidationRules 
    .ensure('user_username').required().minLength(1).maxLength(10) 
    .ensure('user_status').required() 
    .ensure('user_lastlogin').required() 
    .on(this.model); 

Я получаю ошибку Ошибка: ValidationController не зарегистрирован. в ValidateBindingBehaviorBase.bind .... Тем не менее, мне нужен только один валидатор для всей динамически построенной формы, поэтому я не хочу импортировать проверку в каждом из элементов управления. Что я делаю?

Answer 1

Он фактически работает, чтобы импортировать Контроллер проверки и связанные ресурсы в родительской форме, хотя & validate прикреплен к дочерним элементам управления.

Родитель вид-модель

import {inject} from 'aurelia-framework'; 
import {ValidationControllerFactory, ValidationRules} from 'aurelia-validation'; 
import {BootstrapFormRenderer} from 'common/bootstrap-form-renderer'; 

@inject(Core, ValidationControllerFactory) 
export class MyForm { 
    constructor(validationControllerFactory) { 
    this.validationCtrl = validationControllerFactory.createForCurrentScope(); 
    this.validationCtrl.addRenderer(new BootstrapFormRenderer()); 
    } 
    setupValidator() { 
    let rules = []; 
    this.controls.map(control => { 
     if (control.validation) { 
     rules.push(ValidationRules.ensure(control.bind).required().rules[0]); 
    } 
    this.validationCtrl.addObject(this.modelEdit, rules); 
    } 
}