Closed shaunluttin closed 8 years ago
ERROR [app-router] Error: No BindingBehavior named "validate" was found! Stack trace: bind@http://localhost:9000/jspm_packages/npm/aurelia-binding@1.0.0-rc.1.0.2/aurelia-binding.js:1254:15 bind@http://localhost:9000/jspm_packages/npm/aurelia-binding@1.0.0-rc.1.0.2/aurelia-binding.js:4759:9 bind@http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-rc.1.0.0/aurelia-templating.js:1423:9 bind@http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-rc.1.0.0/aurelia-templating.js:3362:9 automate@http://localhost:9000/jspm_packages/npm/aurelia-templating@1.0.0-rc.1.0.0/aurelia-templating.js:3307:7 swap@http://localhost:9000/jspm_packages/npm/aurelia-templating-router@1.0.0-rc.1.0.0/router-view.js:209:7 _commitChanges/</<@http://localhost:9000/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.0/aurelia-router.js:362:18 _commitChanges/<@http://localhost:9000/jspm_packages/npm/aurelia-router@1.0.0-rc.1.0.0/aurelia-router.js:361:9
This our our template:
<template> <form submit.delegate="submit()"> <div class="form-group"> <label class="control-label" for="first">First Name</label> <input type="text" class="form-control" id="first" placeholder="First Name" value.bind="firstName & validate"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </template>
This is our view-model.
import {autoinject} from 'aurelia-framework'; import {ValidationController, validateTrigger} from 'aurelia-validation'; import {required, email} from 'aurelia-validatejs'; @autoinject export class TestForm { @required firstName = ''; controller: ValidationController; constructor(controller: ValidationController) { this.controller = controller; controller.validateTrigger = validateTrigger.manual; } submit() { this.controller.validate(); } }
This is our main.ts
import 'twbs/bootstrap'; import {Aurelia} from 'aurelia-framework'; import config from 'authConfig'; export function configure(aurelia: Aurelia) { aurelia.use .standardConfiguration() .developmentLogging() .plugin('shaunluttin/aurelia-leaflet') .plugin('aurelia-validatejs') .plugin('aurelia-auth', (baseConfig) => { baseConfig.configure(config); }); aurelia.use.plugin('aurelia-animator-css'); aurelia.start().then(() => aurelia.setRoot()); }
Solved. Add the following to main.ts.
.plugin('aurelia-validation')
This our our template:
This is our view-model.
This is our main.ts