jonjamz / blaze-forms

Dead easy reactive forms with validation (Meteor).
https://atmospherejs.com/templates/forms
MIT License
113 stars 11 forks source link

I can't get a basic templates:forms setup to work. #90

Closed 7ammer closed 8 years ago

7ammer commented 8 years ago

I'm not quite sure whats going wrong here. The scripts below do not output a form with any labels or do any kind of validation based on the simpleSchema when I enter a value into the form.

I like the idea of this project as it looks like you get a lot more control than Autoforms but I can't seem to get it to work.

Template.demoForm.helpers({
  getSchema: function() {
    return new SimpleSchema({
        title: { type: String, max: 3, label:"title"},
        body:  { type: String,  optional: true , label:"body"}
    });
  },

  getAction: function() {
    return function(els, callbacks, changed) {
      console.log('SUCCESS:', this);
      callbacks.success();
    };
  }
});

ReactiveForms.createFormBlock({
  template: 'myBasicForm',
  submitType: 'normal'
});

ReactiveForms.createElement({
  template: 'inputer',
  validationEvent: 'keyup',
  reset: function (el) {
    $(el).val('');
  }
});
<template name="demoForm">
  <h4>My Form</h4>
  {{#myBasicForm schema=getShema action=getAction}}
    {{> inputer field="title"}}
    {{> inputer field="body"}}
  {{/myBasicForm}}
</template>
<template name="inputer">
  <label>{{label}}</label>
  <input placeholder={{instructions}} class="block mb1 p1 field col-12 reactive-element" value={{value}}>
  {{#if submitted}}
    {{#if errorMessage}}<p class="error-message">{{errorMessage}}</p>{{/if}}
  {{/if}}
</template>
<template name="myBasicForm">
  <form>
    {{> UI.contentBlock context=context}}
    <p>
      <button class="submitter btn" type="submit">Save</button>
      <div>
        {{#if loading}}
          Loading...
        {{/if}}
        {{#if invalid}}
          Can't submit! There are {{invalidCount}} invalid fields!
        {{/if}}
        {{#if failed}}
          <strong>{{#if failedMessage}}{{failedMessage}}{{else}}Unable to submit the form.{{/if}}</strong>
        {{/if}}
        {{#if success}}
          <strong>{{#if successMessage}}{{successMessage}}{{else}}Saved!{{/if}}</strong>
        {{/if}}
    </div>
    </p>
  </form>
</template>
7ammer commented 8 years ago

Ha so {{#myBasicForm schema=getShema action=getAction}} Should be {{#myBasicForm schema=getSchema action=getAction}}

facePalm