djhi / meteor-autoform-materialize

DEPRECATED - Meteor AutoForm Materialize templates

Meteor Autoform Materialize templates

DEPRECATED - Adds materialize templates for autoform.

Important - I no longer use Meteor and won't be updating this project anymore. Please use https://github.com/mozfet/meteor-autoform-materialize which will be updated. Thanks to @mozfet for taking over this project.

Setup

1. meteor add gildaspk:autoform-materialize
2. In a client file (ex: /client/config/autoform.js)

AutoForm.setDefaultTemplate('materialize');

You must add materialize CSS and JavaScript yourself. Some packages can help:

• materialize:materialize meteor add materialize:materialize
• poetic:materialize-scss meteor add poetic:materialize-scss

Usage and demo

You can checkout the playground which is running here.

Additional type

PickADate

Materialize uses pickadate for date inputs.

You can apply it directly in your template:

{{> afFieldInput name='dateFieldName' type="pickadate"}}

You can also specify it at the schema level:

MySchema = new SimpleSchema({
  dateFieldName: {
    type: Date
    autoform: {
      type:"pickadate"
    }
  }
});

Choosing a Timezone

By default, the field's value will be a Date object representing the selected date and time in the browser's timezone (i.e., based on the user's computer time settings). In most cases, you probably want the Date object relative to some other timezone that you have previously stored. For example, if the form is setting the start date of an event, you want the date to be relative to the event venue's timezone. You can specify a different IANA timezone ID by adding a timezoneId attribute.

{
  date: {
    type: Date,
    autoform: {
      type: "pickadate",
      timezoneId: "America/New_York"
    }
  }
}

Or:

{{> afFieldInput name="typeTest" type="pickadate" timezoneId="America/New_York"}}

Automatic Type Conversions

This input type is intended to be used with type: Date schema keys, but it also works with other schema types. Here's a list:

• Date: Value is stored as a Date object representing the selected date and time in the timezone you specified with the timezoneId attribute. By default, the timezone is that of the browser (i.e., the user's computer time settings).
• String: Value is stored as a string representation of the selected date in ISO format, e.g., "2014-11-25T00:00:00".
• Number: Value is stored as the result of calling getTime() on the Date object (representing the selected date and time in the timezone you specified).
• Array: If the schema expects an array of Date or String or Number, the value is converted to a one-item array and stored.

To provide pickadate options, set a pickadateOptions attribute equal to a helper that returns the options object.

Switch

You an also use switches

At the template level:

{{> afFieldInput name='dateFieldName' type="switch"}}

At the schema level:

MySchema = new SimpleSchema({
  booleanFieldName: {
    type: Boolean
    autoform: {
      type:"switch"
    }
  }
});

You may specify the trueLabel or falseLabel options to customize the switch.

At the template level:

{{> afFieldInput name='dateFieldName' type="switch" trueLabel="Online" falseLabel="Offline"}}

At the schema level:

MySchema = new SimpleSchema({
  booleanFieldName: {
    type: Boolean
    autoform: {
      type:"switch"
      trueLabel:"Online"
      falseLabel:"Offline"
    }
  }
});

If you need other values than boolean, you may specify the trueValue or falseValue options to customize the switch.

At the template level:

{{> afFieldInput name='dateFieldName' type="switch" trueValue="online" falseValue="offline"}}

At the schema level:

MySchema = new SimpleSchema({
  booleanFieldName: {
    type: Boolean
    autoform: {
      type:"switch"
      trueValue:"online"
      falseValue:"offline"
    }
  }
});

Input with prepended icon

You can add icon to any field like this:

{{> afQuickField name='subject' icon='person'}}

For blank space in place of icon, just use "none":

{{> afQuickField name='subject' icon='none'}}

It also works for textarea:

{{> afQuickField name='message' type='textarea' icon='person'}}

Troubleshooting

Extra carets on selects

This happen when using materialize version 0.97.0. A fix has been released with version 0.97.1 but there are other issues.

You should use poetic:materialize-scss until those problems are corrected.

Contributors

• Gildas Garcia (@djhi)
• Razvan Teslaru (@rteslaru)
• Chun Yang (@Chun-Yang)

License

autoform-materialize is licensed under the MIT Licence, courtesy of marmelab.

meteor-autoform-materialize's Issues

afCheckboxGroup_materialize: Checkbox aren't checked as they should be.

When using afCheckboxGroup_materialize to show an existing document, the checkboxes aren't checked as they are supposed to be. Looking at the template instance however, the values are correct, so it's just a matter of actually checking the checkboxes.

Here is what we did to fix it :

Template.afCheckboxGroup_materialize.onRendered(function () {
    var template = this;
    if (this.data.value) {
        this.data.value.forEach(function (value) {
            var selector = 'input[value="' + value + '"]';
            template.$(selector).prop('checked', true);
        });
    }
});

Styling issues

While playing around I found the following styling issues:

• The dropdown (select) lable jumps too high when a value is selected...
• The "submit" button renders over the dropdown fields (This is a Materialize bug so just ignore...)
• The vertical spacing between the "input-fields" is very small, probably because not wrapping each input-field inside its own row... (Field-1 lable almost touches the above line when a value is entered)
• The labels are pushed by 0.75rem to the right, thus not getting left-aligned with the input fields (as intended by: http://materializecss.com/forms.html)
• When passing options to AutoForm inside a Schema the generated quickfield won't get wrapped inside a <div class="input-field"> as intended... (Compare the HTML result of Size-1 & Size-2)

Reproduction deployment: http://materialize-autoform.meteor.com
Repository: https://github.com/boustanihani/materialize-autoform

<body>
    <h5 class="center">Materialize AutoForm</h5>

    <div class="row">
        <div class="col s4 offset-s4">
            {{> hello}}
        </div>
    </div>
</body>

<template name="hello">
    {{> quickForm id="tableCreate" schema="Schema.test"}}
</template>

Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },

    field1: {
        type: String,
        label: 'Field-1',
    },

    field2: {
        type: String,
        label: 'Field-2',
    },
});

Slider does not conform to materialize docs

Submitted by @rteslaru

Add Class Invalid

On Materialize to make the input with red underline after validation fail need add this class invalid to input.

select dropdown doesnot work in firefox

In firefox the the select dropdown is rendered but when i change the value the value in the dropdown is not changed. If i render the select tag without autoform i mean with only materialize package then it works fine.
I notice when i log the console class of dropdown list is not changed to active and disabled whereas in the materializecss it adds the class disabled and set acitive to current selected list
Thanks,

Support for aldeed:autoform-select2

I'm loving the package so far. I was just wondering if it would be possible to get support for https://atmospherejs.com/aldeed/autoform-select2 or if you know any workaround, that would be great too!

Range Slider

It would be nice to add support for range slider

http://materializecss.com/forms.html#range

afCheckboxGroupInline template is not inline as expected

It should put the each tag inside the <p> element instead, correct?

Error when trying to use pickadateOptions

Tried to set the function on autoform object of schema and in a helper function on template, same error.

Exception from Tracker recompute function:
debug.js:41 Error: Unexpected object in htmljs in toText: [object Object]
    at HTML.ToTextVisitor.def.visitObject (visitors.js:240)
    at HTML.Visitor.def.visit (visitors.js:61)
    at Object.HTML.toText (html.js:259)
    at Object.Blaze._toText (view.js:720)
    at updateAttributes (materializer.js:129)
    at view.js:191
    at Function.Template._withTemplateInstanceFunc (template.js:437)
    at view.js:190
    at Object.Blaze._withCurrentView (view.js:523)
    at viewAutorun (view.js:189)

Switch labels

When switches are in the false position the label drops down covering them:

Also, is there a way to not display the true and false labels?

Styling afQuickField Labels

If you look at the Input fields on http://materializecss.com/forms.html you will notice that the labels get smaller on focus but using {{> afQuickField name='<field>'}} combined with this package will let the labels all render small from the beginning (even without focus), is this intended? IMO, the other behaviour looks nicer :)

Label overlaps input with the 'disabled' attribute

This is what happens when an input is created with autoform using the 'disabled' parameter :

Here is what's expected :

label-class="active" doesn't work so there is no clean workaround yet.

Active class on label is not added

In a update form the "active" class is not added to the label if the value of the input is set. When I focus the input, the label becomes active.

When the form is rendered:

When I focus the input:

dropdown lable jumps too high

The dropdown (select) lable jumps too high when a value is selected... I also noticed that passing options: 'allowed' magically lets this issue disappear.

Compare the first two dropdowns =>

Reproduction deployment: http://materialize-autoform.meteor.com
Repository: https://github.com/boustanihani/materialize-autoform

<body>
    <h5 class="center">Materialize AutoForm</h5>

    <div class="row">
        <div class="col s4 offset-s4">
            {{> hello}}
        </div>
    </div>
</body>

<template name="hello">
    {{> quickForm id="tableCreate" schema="Schema.test"}}
</template>

Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },
});

vertical spacing too small

In some cases, the vertical spacing between the "input-fields" is very small, probably because not wrapping each input-field inside rows & columns... (Field-1 label almost touches the above line when a value is being entered)

Reproduction deployment: http://materialize-autoform.meteor.com
Repository: https://github.com/boustanihani/materialize-autoform

<body>
    <h5 class="center">Materialize AutoForm</h5>

    <div class="row">
        <div class="col s4 offset-s4">
            {{> hello}}
        </div>
    </div>
</body>

<template name="hello">
    {{> quickForm id="tableCreate" schema="Schema.test"}}
</template>

Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },

    field1: {
        type: String,
        label: 'Field-1',
    },

    field2: {
        type: String,
        label: 'Field-2',
    },
});

Note about wrong commit

Comment for commit 5ca9aad is wrong...
I was working on another project and forgot to switch folder in my terminal before commiting.

This commit obviously just updated the version file

Autoform Materialize and Typeahead/Autocomplete

Hi there,

any suggestions on this topic?
Is there a css class for typeahead in Materialize?
How to do this best, maybe use Meteor-Autocomplete?

Regards

pickadate throws Error

Hey !

I'm trying to use pickadate type. It's working but it throws an error when displaying the form, in both creation and edition :(

Exception from Tracker afterFlush function:
TypeError: Cannot read property 'get' of undefined
    at AutoForm.addInputType.valueOut (pickadate.js:24)
    at Object.autoFormGetInputValue [as getInputValue] (autoform-api.js:518)
    at HTMLInputElement.<anonymous> (autoform-inputs.js:6)
    at Function.jQuery.extend.each (jquery.js:384)
    at jQuery.fn.jQuery.each (jquery.js:136)
    at getFlatDocOfFieldValues (autoform-inputs.js:5)
    at Object.autoFormGetFormValues [as getFormValues] (autoform-api.js:321)
    at _validateField (autoform-validation.js:36)
    at _.throttle (underscore.js:707)
    at Object.autoFormChangeHandler (autoform-events.js:436)

Textarea expands height to bottom of the page as soon as key is pressed

I have a simple comment collection described as such:

Comments.attachSchema(new SimpleSchema({
  content: {
    type: String,
    label: "Message",
    max: 2000,
    autoform: {
      afFieldInput: {
        type: "textarea"
      }
    }
  },
  // ...
}));

I display my autoform this way:

<template name="newComment">
  {{#autoForm collection="Comments" id="insertCommentForm" type="method" meteormethod="insertComment"}}
    {{> afQuickField name='content'}}
  <button type="submit" class="btn waves-effect waves-light">Post</button>
  {{/autoForm}}
</template>

I can click and get a cursor normally. But as soon as I start typing in the textarea, the field just expands fluidly but rapidly, until none of what's underneath (therefore, the "Post" button) can be seen. The scrollbar just doesn't go further down. No errors in the console, it happens both on firefox 39 and Chrome 43.

Add input ID to label focus works fine

When click on a label it should focus on the corresponding input, but only using the name attribute in this field focus effect does not work because it needs the ID attribute.
So, the label has the attr for, but the input need the id.

I know that we can add it manually, but this theme auto generate the label attr for with the input name from schema, that is unique like the id attr need be.
I hope you understand my vision. Any way thank you so much for this package and good work.

type pickadate doesn't work

I think because the template afPickadate has the wrong name. It should be afPickadate_materialize, right?

Error when using pickadate

I'm getting the following error:

Exception in template helper: ReferenceError: atts is not defined
    at Object.AutoForm.addInputType.valueIn (http://localhost:3000/packages/gildaspk_autoform-materialize.js?42f987a371dc61ee9d1422c7be8927d3e00d78d1:1119:18)
    at getInputValue (http://localhost:3000/packages/aldeed_autoform.js?b2b90d28d5cc29be68358bb3c8bb8a337992a7dd:1881:22)
    at Object.afFieldInputContext (http://localhost:3000/packages/aldeed_autoform.js?b2b90d28d5cc29be68358bb3c8bb8a337992a7dd:6028:17)
    at bindDataContext (http://localhost:3000/packages/blaze.js?4e49999979a58da0e2265f7bd3f5910f9901b07b:2786:16)
    at Blaze._wrapCatchingExceptions (http://localhost:3000/packages/blaze.js?4e49999979a58da0e2265f7bd3f5910f9901b07b:1607:16)
    at http://localhost:3000/packages/blaze.js?4e49999979a58da0e2265f7bd3f5910f9901b07b:2834:66
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?4e49999979a58da0e2265f7bd3f5910f9901b07b:3382:12)
    at wrapHelper (http://localhost:3000/packages/blaze.js?4e49999979a58da0e2265f7bd3f5910f9901b07b:2833:27)
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:172:18)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:109:25)

When using:

{{> afFieldInput name='endDate' type="pickadate"}}

Datepicker in modal is cut off

I've tried setting datepicker container with this on render but does not work.

$('.datepicker').pickadate({
container: 'body'
});

Bug: afQuickField does not save to doc

Hi @djhi , I am enjoying you package and thank you.

I get an error described bellow. Can you take a look when you have time?

Bug demo: http://meteorpad.com/pad/kEdy34SJfEhjbiymy/Leaderboard

• click 'a1'
• click 'submit'
• NOTE areas is required error message even though a1 is selected
• NOTE at http://app-b6xirfen.meteorpad.com/, open console, the log message comes from

AutoForm.addHooks(['new-campaign-1'], {
  formToDoc: function(doc) {
    console.log('doc:', doc);
    return doc;
  },
});

• The quick field that caused this error:

 {{> afQuickField
        name='areas'
        options='allowed'
        noselect=true
        label=false}}

• autoform itself works fine without autoform-materialize plugin.

Radio buttons not visible

They only work without materialize:materialize. But as soon as I add materialize package and autoform-materialize package, they're gone.

valid/invalid classes for form validation

This feature seems to be completely lacking from this package.
Not a deal breaker, but it would be nice to have.

or maybe I'm doing something wrong.

change layout of input date in afFieldGroup and afQuickField

similiar to #43 , the layout for date fields with label is different than text inputs; therefore needs different template when using afFieldGroup and afQuickField (looks like label and input should not be wrapped in .input-field)

labels are missing on select-radio

labels are missing on select-radio, and select-radio-inline

Checkboxes and radios don't work when using afQuickField

When using afQuickField the input has what looks like a randomly generated id, so the 'for' attribute on the label is not valid. When using 'afFieldInput' it comes out fine. See example below:

<template name="afCheckbox_materialize">
  <p>
    <input id="{{this.name}}" type="checkbox" value="{{this.value}}" {{atts}} />
    <label for="{{this.name}}">{{afFieldLabelText name=this.name}}</label>
  </p>
</template>

{{>afQuickField name="foo"}}:

<p>
    <input id="ZH5e9BNYskZQGxCqy" type="checkbox" name="foo" data-schema-key="foo">
    <label for="foo">Foo</label>
<p>

{{>afFieldInput name="foo"}}:

<p>
    <input id="foo" type="checkbox" name="foo" data-schema-key="foo">
    <label for="foo">Foo</label>
<p>

TextArea should be wrapped in .input-field div

From the materialize website:

You must have a .input-field div wrapping your input and label.

dropdowns/selects don't work

Like the title says, selects are not working. Running $('select').material_select(); in the console fixes it.

EDIT: also great work with this :)

No plus icon when type: Array

Hi

When using your package there is no plus icon on the button for adding more fields.

See http://autoform.meteor.com/quickform and select Optional array of strings

"select-multiple" fields support?

Hi,I love this project but is the support of "select-multiple" type of fields planned anytime soon? ( "select-multiple" works like a mere "select" for now)

Active class not added when input has a placeholder

The label overlaps the placeholder.
When loaded:

When input is focused:

some labels are not left-aligned

Some labels are pushed by 0.75rem to the right, thus not getting left-aligned with the input fields (as intended by: http://materializecss.com/forms.html)

Reproduction deployment: http://materialize-autoform.meteor.com
Repository: https://github.com/boustanihani/materialize-autoform

<body>
    <h5 class="center">Materialize AutoForm</h5>

    <div class="row">
        <div class="col s4 offset-s4">
            {{> hello}}
        </div>
    </div>
</body>

<template name="hello">
    {{> quickForm id="tableCreate" schema="Schema.test"}}
</template>

Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },

    field1: {
        type: String,
        label: 'Field-1',
    },

    field2: {
        type: String,
        label: 'Field-2',
    },
});

Set the website of this GitHub repo to the Atmopshere package

Example:

weird behavior with select

Hi,

I have an issue with select-dropdown. It doesn't show at all where it's supposed to be :-(

Here is a picture

code :

{{> quickForm schema=this.schema id=this.name type="method" omitFields="question" meteormethod="questions/answer"}}

Btw Don't know what is going on and if I want to inspect the dropdown I can't because it disappears on me when I click so I cant use element inspector.

dropdown labels are too high

This issue still seems to exist using v0.0.20: #31

Check: http://dropdown-labels-too-high.meteor.com/

{{> quickForm id="tableCreate" schema="Schema.test"}}

Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },
});

Inline radiobuttons

Inline radio buttons errors with label and not rendering inline

missing $unset for cleared pickadate fields

When using pickadate and after clearing a date field, calling AutoForm.getFormValues('FormId').updateDoc will not contain $unset for the field cleared:

{
    type: Date,
    autoform: {
        type: "pickadate",
        pickadateOptions: {
            //...
        }
    },
}

I could also do a reproduction example if needed...

Typo in ReadMe

PickADate

Materialize uses pickadate for date inputs.

You can apply it directly in your template:

{{> afFieldInput name='dateFieldName' type="pickadate"}}
You can also specify it at the schema level:

MySchema = new SimpleSchema({
  dateFieldName: {
    type: Date
    autoform: {
      type="pickadate"
    }
  }
});

type="pickadate" should be type: "pickadate"

missing .input-field wrapper when passing custom options

When passing extra options to AutoForm inside a Schema the generated quickfield won't get wrapped inside a <div class="input-field"> as intended (check: http://materializecss.com/forms.html)

Compare the HTML result of Size-1 & Size-2

Reproduction deployment: http://materialize-autoform.meteor.com
Repository: https://github.com/boustanihani/materialize-autoform

<body>
    <h5 class="center">Materialize AutoForm</h5>

    <div class="row">
        <div class="col s4 offset-s4">
            {{> hello}}
        </div>
    </div>
</body>

<template name="hello">
    {{> quickForm id="tableCreate" schema="Schema.test"}}
</template>

Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },

    field1: {
        type: String,
        label: 'Field-1',
    },

    field2: {
        type: String,
        label: 'Field-2',
    },
});

afBooleanRadioGroup uses trueLabel for both true and false inputs

The first input in afBooleanRadioGroup should have {{#with this.atts.falseLabel}} instead of {{#with this.atts.trueLabel}}

Select not working in the 0.0.18

As mentioned here

The call to material_select never happens. Thoughts?

File input missing for cfs-autoform

When doing file uploads with cfs:autoform file input is missing.

I'm going to look bootstrap3 template in autoform templates and see if I can find what's missing. I'll create a PR for it once I figure it out.

Is this project dead?

Hi,

Great work!

But I do wonder if this is dead since it has been months now that there are no updates and PRs waiting.

@djhi if you don't have the time to work on this, would you consider granting write permissions to some other devs for both this repo and the atmosphere package?

Select options disappear after validation error

I have a form with a select that has a long (50+) list of options (loaded dynamically).

If I submit the form when there are validation errors, then only the first ~15 options stay visible while the other options disappear.

Looking into the dom, I can see that the original select options are still there, but the generated li options are missing the rest.

Question: {{atts.id}}

@djhi I am just curious why you defined {{atts.id}} as {{atts.name}} in:
https://github.com/djhi/meteor-autoform-materialize/blob/0.0.21/inputTypes/switch/switch.js#L35

Is it because you faced this particular issue => Meteor-Community-Packages/meteor-autoform#1074

I suppose this is an autoform bug right?

Support for select elements?

It looks like you have to add a browser-default class to normal <select> elements to get them to show up in Materialize. Otherwise Materialize is using a fake select / dropdown UI by default.

Have you tested your package with <select> elements yet?

Icon prefixes

Is there any possibility to use a QuickField to render input with an icon prefix?
Like this:

{{> afQuickField name='username' icon='account_circle'}}

to render this:

<div class="input-field col s6">
      <i class="material-icons prefix">account_circle</i>
      <input id="username" type="text" class="validate">
      <label for="username">Username</label>
</div>