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
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:simple-schema@1.5.3
allow-deny@1.0.4
autopublish@1.0.7
autoupdate@1.2.9
babel-compiler@6.6.4
babel-runtime@0.1.8
base64@1.0.8
binary-heap@1.0.8
blaze@2.1.7
blaze-html-templates@1.0.4
blaze-tools@1.0.8
boilerplate-generator@1.0.8
caching-compiler@1.0.4
caching-html-compiler@1.0.6
callback-hook@1.0.8
check@1.2.1
ddp@1.2.5
ddp-client@1.2.7
ddp-common@1.2.5
ddp-server@1.2.6
deps@1.0.12
diff-sequence@1.0.5
ecmascript@0.4.3
ecmascript-runtime@0.2.10
ejson@1.0.11
es5-shim@4.5.10
fastclick@1.0.11
geojson-utils@1.0.8
hot-code-push@1.0.4
html-tools@1.0.9
htmljs@1.0.9
http@1.1.5
id-map@1.0.7
insecure@1.0.7
jquery@1.11.8
launch-screen@1.0.11
livedata@1.0.18
logging@1.0.12
mdg:validation-error@0.2.0
meteor@1.1.14
meteor-base@1.0.4
minifier-css@1.1.11
minifier-js@1.1.11
minimongo@1.0.16
mobile-experience@1.0.4
mobile-status-bar@1.0.12
modules@0.6.1
modules-runtime@0.6.3
mongo@1.1.7
mongo-id@1.0.4
npm-mongo@1.4.43
observe-sequence@1.0.11
ordered-dict@1.0.7
promise@0.6.7
random@1.0.9
reactive-var@1.0.9
reload@1.1.8
retry@1.0.7
routepolicy@1.0.10
spacebars@1.0.11
spacebars-compiler@1.0.11
standard-minifier-css@1.0.6
standard-minifier-js@1.0.6
templates:forms@2.1.4
templating@1.1.9
templating-tools@1.0.4
tracker@1.0.13
ui@1.0.11
underscore@1.0.8
url@1.0.9
webapp@1.2.8
webapp-hashing@1.0.9
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:
and
FormContext exist as described.
I made a fresh project with
and added this package
I got the same errors as above. One for every element I've included.
My formBlock template:
My formElement template:
main.js
main.html
versions