Aurelia Validierung auf dynamisch aufgebautem Formular

Question

Ich erstelle ein benutzerdefiniertes Element, das dynamisch ein Benutzereingabeformular generiert. Bis jetzt klappt es ganz gut, aber ich habe Probleme mit der Aurelia-Validierung und benötige Hilfe.

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

ich verschiedene control.type ‚s zur Verfügung haben und die Arbeit (my-textbox, my-dropdown, my-datepicker) - jeder von ihnen ist ein benutzerdefiniertes Element. Zum Beispiel:

Beispiel Steuerung (my-textbox.html)

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

Eltern Ansicht:

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

Eltern Ansicht-Modell:

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

Ich erhalte den Fehler Fehler: Ein ValidationController wurde nicht registriert. bei ValidateBindingBehaviorBase.bind .... Ich möchte jedoch nur einen Validator für das gesamte dynamisch erstellte Formular, daher möchte ich die Validierung nicht in jede der Steuerelemente importieren. Was mache ich?

Answer 1

Es funktioniert tatsächlich, den Validierungscontroller und verwandte Ressourcen in dem übergeordneten Formular zu importieren, obwohl das & validate an die unterordneten Steuerelemente angefügt wird.

Eltern Ansicht-Modell

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