Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Are there any version constraints? #103

Open
Jokinen opened this issue May 18, 2016 · 0 comments
Open

Are there any version constraints? #103

Jokinen opened this issue May 18, 2016 · 0 comments

Comments

@Jokinen
Copy link

Jokinen commented May 18, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant