blaze-forms
blaze-forms copied to clipboard
jonjamz
Are there any version constraints?
We're using Meteor 1.3.2.4 and are using the imports directory. I tried to get things working with the example code, but they didn't. The validation seemed to work et al, but "this" returned as an empty object. No error in the log or anything like that.
The examples use the variable named "context" and looking through the history.md I noticed that it should be formContext. When I made that alteration I was given the following errors:
TypeError: component.submitted.get is not a function
and
TypeError: Cannot read property 'validateOne' of undefined
FormContext exist as described.
I made a fresh project with
meteor create
and added this package
meteor add templating:forms
I got the same errors as above. One for every element I've included.
My formBlock template:
<template name="formBlock">
<form>
{{> UI.contentBlock data=data context=formContext }}
{{#if invalid}}
<strong>Can't submit!</strong>
There are <span class="badge">{{invalidCount}}</span> invalid fields!
{{/if}}
{{#if failed}}
<strong>Woops!</strong>
There was a problem submitting the form!
{{/if}}
</form>
</template>
My formElement template:
<template name="inputText">
<input id="{{ field }}" name="{{ field }}" type="text" placeholder={{ instructions }} value={{ value }} class="validate reactive-element">
{{# if label }}<label for="{{ field }}">{{ label }}</label>{{/ if }}
{{#if submitted}}
{{#if errorMessage}}<p class="error-message">{{errorMessage}}</p>{{/if}}
{{/if}}
</template>
main.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { ReactiveForms } from 'meteor/templates:forms';
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
import './main.html';
import './form-block.html';
import './input-field.html';
const schema = new SimpleSchema({
test: {
type: String
}
});
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
schema() {
return schema;
},
action() {
return (elements, callbacks, changed) => {
console.log("[forms] Action running!");
console.log("[forms] Form data!", this);
console.log("[forms] HTML elements with `.reactive-element` class!", elements);
console.log("[forms] Callbacks!", callbacks);
console.log("[forms] Changed fields!", changed);
};
}
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
ReactiveForms.createFormBlock({
template: 'formBlock',
submitType: 'normal'
});
ReactiveForms.createElement({
template: 'inputText',
validationEvent: 'keyup',
reset: function (el) {
$(el).val('');
}
});
main.html
<head>
<title>simple</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello }}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
{{#formBlock action=action schema=schema }}
{{> inputText field='test' }}
{{/formBlock}}
</template>
<template name="info">
<h2>Learn Meteor!</h2>
<ul>
<li><a href="https://www.meteor.com/try">Do the Tutorial</a></li>
<li><a href="http://guide.meteor.com">Follow the Guide</a></li>
<li><a href="https://docs.meteor.com">Read the Docs</a></li>
<li><a href="https://forums.meteor.com">Discussions</a></li>
</ul>
</template>
versions
aldeed:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
mdg:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
templates:[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
