If I create a quickform all is ok, if I create a manual form all is ok too but when using afQuickField as below my page gives no errors and is blank:

{{#autoForm schema=testCollection id="insert_test"}}
    {{afQuickField 'testField' }}
    {{> buttons}}
{{/autoForm}}

@aldeed If I wanted to do something after a successful insert, such as navigating to the page for the document I just inserted, is there currently a place to do this?

Thanks!

Doesn't seem to work for me in the above mentioned version of Meteor.

a) autoform-client.js and autoform-common.js never seem to make it to the client (When I check resources in chrome)

b) If I move the files into my app I get the following error:

Uncaught ReferenceError: AutoForm is not defined in autoform-client.js:3

For things like passwords and certain kinds of date fields, it would be nice if we could add validations that consider multiple fields or even the whole form. For instance, checking that a password and passwordConfirm field match or that a year, month, and day field are on a legal date - i.e. not Feb, 31.

Is it possible to take the values from one collection and use them as options in an input form for another collection? For example: if I had a collection named Singers and in my schema I had a "genre" category, if I wanted to create a genre collection and then add different genres to this collection so it would show up as one of the options under the singer collection genre options, is this possible?

Thanks

Hi, very interested in your autoform package!

One thing though is, I am not sure how to use it without using collections2. Although you list that as optional, you do not give an example without using it.

Thank you!

In a Collection2 model I have defined a required field named createdAt wich is a simple Date object. How can I create an object on the client with autoform, add the createdAt field with the current date on the client, and then overwrite this field on the server to get the trust-able date value?

Maybe extract and modify the schema:

var schema = collection.simpleSchema().schema();
delete schema.createdAt;

Give this schema to an autoform and then run a Meteor.method on both the client and the server to add the createdAt attribute?

Im trying to set up a true/false select box that defaults to 'true'... is this possible?

Alternatively I could invert all my logic (since it seems that select boxes always default to false)... but is there an option or approach that I missed?

Exception while delivering result of invoking '/polls/insert' 
Error
message: "Template not in DOM"
stack: "Error: Template not in DOM↵    at Object.templateInstanceData.(anonymous function).templateInstanceData.(anonymous function).find (http://localhost:3001/packages/templating.js?5944cd5e16b26fbf83959a0fe92d7754029a624d:110:17)↵    at http://localhost:3001/packages/autoform.js?fec7c84e892f3f7bcddb33b7d53e0634e48fe91a:510:22↵    at wrappedCallback (http://localhost:3001/packages/mongo-livedata.js?2f66d8591aa3225badaf5a98bfba28287bff3a3d:493:9)↵    at null._callback (http://localhost:3001/packages/meteor.js?643bfdbf5382aa1986ff0dd3e6474d4a7e247bab:787:22)↵    at _.extend._maybeInvokeCallback (http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:3528:12)↵    at _.extend.dataVisible (http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:3557:10)↵    at http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:4227:7↵    at Array.forEach (native)↵    at Function._.each._.forEach (http://localhost:3001/packages/underscore.js?13ab483e8a3c795d9991577e65e811cd0b827997:130:11)↵    at _.extend._runAfterUpdateCallbacks (http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:4226:7)"
__proto__: d
constructor: function Error() { [native code] }
message: ""
name: "Error"
toString: function toString() { [native code] }
__proto__: Object
 Error: Template not in DOM
    at Object.templateInstanceData.(anonymous function).templateInstanceData.(anonymous function).find (http://localhost:3001/packages/templating.js?5944cd5e16b26fbf83959a0fe92d7754029a624d:110:17)
    at http://localhost:3001/packages/autoform.js?fec7c84e892f3f7bcddb33b7d53e0634e48fe91a:510:22
    at wrappedCallback (http://localhost:3001/packages/mongo-livedata.js?2f66d8591aa3225badaf5a98bfba28287bff3a3d:493:9)
    at null._callback (http://localhost:3001/packages/meteor.js?643bfdbf5382aa1986ff0dd3e6474d4a7e247bab:787:22)
    at _.extend._maybeInvokeCallback (http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:3528:12)
    at _.extend.dataVisible (http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:3557:10)
    at http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:4227:7
    at Array.forEach (native)
    at Function._.each._.forEach (http://localhost:3001/packages/underscore.js?13ab483e8a3c795d9991577e65e811cd0b827997:130:11)
    at _.extend._runAfterUpdateCallbacks (http://localhost:3001/packages/livedata.js?dab0057c9e7c90bcd874be39d89b9cd54637979b:4226:7) debug.js:43

Ready to tear my hair out here... what am I doing wrong?

Can I turn on autocomplete on an input field? Where would you do this?

Thanks

Hi,

I would like to use autoform without collection2, however, I am getting an error message , "package not available: collection2" I haven't set up any schemas yet. Does autoform look for a schema and default to collection2?

Thanks

If a button containing the meteor-data-method isn't of the type "submit", it simply doesn't do anything. As such, the "contactForm" example in the documentation wouldn't work. I guess it is also a good idea to clearly indicate that the buttons have to be of the type "submit" for autoform to work.

Hello,

thanks for the package. I'm just experimenting whether this works under the new meteor ui template release 10.1... and I got the following error after i run

meteor --release template-engine-preview-10.1

=> Errors prevented startup:

While building package autoform:
packages/html-tools/scanner.js:21: Around: "<form(HERE>>>){{{atts}}}": Expected space after tag name (compiling autoform.html)
at Scanner.fatal (packages/html-tools/scanner.js:21)
at getTagToken (packages/html-tools/tokenize.js:385)
at getHTMLToken (packages/html-tools/tokenize.js:256)
at getContent (packages/html-tools/parse.js:96)
at Object.parseFragment (packages/html-tools/parse.js:48)
at Object.Spacebars.parse (packages/spacebars-compiler/spacebars.js:382)
at Object.Spacebars.compile (packages/spacebars-compiler/spacebars.js:743)
at Object.html_scanner._handleTag (packages/compileTemplates/plugin/html_scanner.js:151)
at Object.html_scanner.scan (packages/compileTemplates/plugin/html_scanner.js:102)
at doHTMLScanning (packages/compileTemplates/plugin/compile-templates.js:18)
at Package (packages/compileTemplates/plugin/compile-templates.js:57)

=> Your application has errors. Waiting for file change.

I have a form with some fields. If the user isn't connected (with the build-in user management system) I want to add one more field (pseudo). I want this field to be added/removed reactively if the user connect/disconnect.

One way to handle this use case could be to add a condition key in the field definition (coffeescript):

message:
    type: String
pseudo:
    type: String
    max: 16
    condition: -> !Meteor.userId()

• If condition() !== true, then Autoform do not display the item, and do not return its value in the doc given to the callback function.
• SimpleSchema validation start to check this condition
  • if condition is true, the field is required to be in the document
  • otherwise, it act as if the field wasn't defined, as a result the field is required to not be in the document
• If optional is set to true, the field is optional even if condition is true

Thoughts?

This may well be a case of my inability to read documentation, but I can't see an obvious way to have pre-set values show in an auto form. Obviously, the autoValue allows me to set a value before the actual insert, but I just want a default value to show in the form. Specically, I have a Date object in my schema which I would like to show up as a data selector, pre-set to today.

I would like to create a tags field in the schema of a posts-like collection. This field is a list of strings (type: [String]).

How can autoform handle this use case? Should I create a custom input field (for instance a input[type=text] with tags separated by commas)?

Hello :)
Thank you for the hardwork on autoform and collection. It's very useful !

Today I tried to setup some fields in my collection adding the

name:{
  type: String,
  label: 'Customer name',
  max: 40,
  unique: true        
},

it works well on insert, I am not able to insert element in collection with the same name.

But on update, it "fails". It does not recognize that the unique element already in the collection is itself. I got the "name should be unique" error.

Is there a way to solve this issue ?
Thanks

Alright, so i've hit the point where I really need to add nested array of objects (collections). The example of using locations.0.depart_on didn't work.

Before I start trying to hack on this functionality, do you have something in the works already or an idea? Is there any reason you wanted locations.0.depart_on vs locations[0].depart_on?

When there is no doc specified on the autoform, the input helper should respect the value attribute. This is helpful, for example, if someone is building an insert form in which they want a date field to default to today, or default text in any other input, or a default option selection.

I was having some issues with {{autoForm}} populating the correct value on checkboxes in 0.4.3. The problem appeared to be my object's value being true rather than "true".

The following change in autoform-client.js fixed it. Line 945:

value = (value === "true" || value === true) ? true : false;

Of course there may very well be darn good reasons not to do that, so I will respectfully defer to the author.

Right now, AutoForm package listen to the click event on the submit button. I think it's better to listen to the onSubmit event on form object because this event can be fired in at least three ways:

• click the submit button
• press Enter on some form inputs, including the submit button (useful with tab-navigation)
• js call to the standard submit() method

The first case is already handle by AutoForm but we need support for the two others.

When navigating between various updates/submits of the same Autoform the select element is not displaying the correct selected option. The HTML is correct, the option that should be displayed has its selected attribute set, but the UI doesn't reflect this. If you refresh the page, it works as expected, so it seems to be a problem with dynamic rendering. Interestingly, if I add the selected attribute to the option dynamically, via a browser debug console, it updates the UI as expected. I haven't found a browser where it works without a refresh, I've tested Chrome, Safari Desktop/Mobile & Firefox. I've googled around and it seems it may have something to do with the way Meteor dynamically injects HTML into the DOM. The fact that it works via the debug console leads be to believe maybe there is a way to dynamically inject the selected attribute that works, but to be honest, I have no idea what is going on here...

I am using quickForm which works brilliantly, the 'type' options are listed as insert/update/delete/method but is there an option for 'view'? ie. so a form can be generated with all readonly/disabled controls.

Using the 'Books' schema example with collections2 I get the following error in the console:

Cannot call method 'simpleSchema' of undefined 

I added the collection2 package before autoform, perhaps this is a problem?

The code below gives me the following error message and a meteor chrash:

TypeError: Object [object Object] has no method 'callbacks'
    at app/lib/models.js:X:X

Issues = new Meteor.Collection2("issues", {
  schema: {
    title: {
      label: "Title",
      type: String
    }
  }
});

Issues.allow({
    insert: function() {
        return true;
    },
    update: function() {
        return true;
    },
    remove: function() {
        return true;
    },
    fetch: []
});


Issues.callbacks({
  insert: function(error, result) {
    if (error) {
      return console.log("Insert Error:", error);
    } else {
      alert("Inserted!");
      return console.log("Insert Result:", result);
    }
  },
  update: function(error) {
    if (error) {
      return console.log("Update Error:", error);
    } else {
      return alert("Updated!");
    }
  },
  remove: function(error) {
    return console.log("Remove Error:", error);
  }
});

I am trying out autoform which looks great but I am stuck with this. It looks like a bug to me but maybe I am making a mistake.

Here is a little gist that shows the problem. There is a stack trace added which I see in Firebug but it does not help me to understand the problem. Obviously "mrt add collection2" and "mrt add autoform" have to be run before it is started.

Would really appreciate this!

thank you!

Or from a collection2 how can i define a autoform instance to use it's hooks system?
i looked at the autoform example but i dont get how it defines the documents.hooks since its a collectin2 instance and shouldnt be able to use the callbacks/hooks.

Thanks a lot 👍

Hi!

Selects and radio elements does not work when using quick formats for the form or field (quickForm or afQuickField). Compare the two screenshots below to get the idea of what I mean:

...is the output of the following code:

<div class="control-group{{#if afFieldIsInvalid 'radioBoolean'}} error{{/if}}">
    {{afFieldLabel 'radioBoolean'}}
    {{afFieldInput 'radioBoolean' radio="true" trueLabel="Yes" falseLabel="No"}}
    {{#if afFieldIsInvalid 'radioBoolean'}}
    <span class="help-block">{{afFieldMessage 'radioBoolean'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'selectBoolean'}} error{{/if}}">
    {{afFieldLabel 'selectBoolean'}}
    {{afFieldInput 'selectBoolean' select="true" trueLabel="Yes" falseLabel="No"}}
    {{#if afFieldIsInvalid 'selectBoolean'}}
    <span class="help-block">{{afFieldMessage 'selectBoolean'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'requiredSelect'}} error{{/if}}">
    {{afFieldLabel 'requiredSelect'}}
    {{afFieldInput 'requiredSelect' options=numSelectOptions}}
    {{#if afFieldIsInvalid 'requiredSelect'}}
    <span class="help-block">{{afFieldMessage 'requiredSelect'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'optionalSelect'}} error{{/if}}">
    {{afFieldLabel 'optionalSelect'}}
    {{afFieldInput 'optionalSelect' options=strSelectOptions}}
    {{#if afFieldIsInvalid 'optionalSelect'}}
    <span class="help-block">{{afFieldMessage 'optionalSelect'}}</span>
    {{/if}}
</div>
<div class="control-group{{#if afFieldIsInvalid 'firstOptionSelect'}} error{{/if}}">
    {{afFieldLabel 'firstOptionSelect'}}
    {{afFieldInput 'firstOptionSelect' firstOption="(Select Something)" options=numSelectOptions}}
    {{#if afFieldIsInvalid 'firstOptionSelect'}}
    <span class="help-block">{{afFieldMessage 'firstOptionSelect'}}</span>
    {{/if}}
</div>

...is a part of the following code:

{{quickForm schema="Documents" type="insert" id="myQuickForm" buttonContent="Insert" buttonClasses="btn btn-primary"}}

I had an edit from working fine with the old router but have since upgraded my project to use Iron Router.

autoForm schema=myCollection doc=selectedRecord id="edit_template"

Previously I defined 'selectedRecord' in the template helper, where data was selected based on a session var I had set - all ok.

Now, since Iron-Router has additional functionality where the session may no longer be needed I was wondering how to define 'selectedRecord' to use eg. 'this.params._id' from the RouteController?

I am a little confused as I have not been able to find info on how to filter markup (possibly excepting a secure html subset, or textile/markdown syntax) and scripts from the user input with autoforms, or in meteor in general.

Is this security attack vector already properly handled?

But autoform seems to require it.

Hi, I am trying out autoform and during my tests I accidentally entered an invalid field in:

AutoForm seems to move the data made available to the template out of its normal scope. This is rather unhelpful if you need some of that data (e.g. as a label or something else) inside of the form, but outside of an afField.

Simply put, you would now have to do:
{{#autoForm schema=form doc=this}}
{{_doc.description}}
{{afFieldInput ...

Where you might expect something like this:
{{#autoForm schema=form doc=this}}
{{description}}
{{afFieldInput ...

Is there a specific reason for this "shadowing" of variables?

I've got a MongoDB unique multi-field index. I am able to successful detect this error, and display an error message to the user, in AutoForm's Update Callback. The problem is that while the error is displayed to the user, the values of the Autoform's input fields revert back to the original valid values, and not the values that the user just input to receive the error. Note, this is not an issue in the insert case, as the values remain what the user just input when the error message is displayed. Any idea how I might be able to deal with this scenario? Thanks!

The collection2 package added denyUpdate and denyInsert options. When a quickForm is based on a Collection2, an update form should not include denyUpdate fields and an insert form should not include denyInsert fields.

Over in Meteor-Community-Packages/meteor-simple-schema#5, it was determined that the best way to handle the need for additional validation states as feedback for users is by enhancing the autoform package to support multiple additional SimpleSchemas.

In other words, you could specify a SimpleSchema defining some additional schema rules that should be displayed and treated as warnings. These would only be tested prior to form submission. Here's one possible implementation:

JS:

UserForm = new AutoForm({
  username: {
    type: String,
    label: "Username",
    regEx: /^[-_a-z0-9]*$/i,
    unique: true
  },
  password: {
    type: String,
    label: "Password",
    min: 8,
    regEx: /[a-z0-9]/i
  }
});

UserFormWarnings = new SimpleSchema({
  username: {
    type: String,
    label: "Username",
    min: 2
  },
  password: {
    type: String,
    label: "Password",
    regEx: /[^a-z0-9]/i
  }
});

Template.insertUserForm.warningSchema = function () {
  return {
    warning: {
      check: UserFormWarnings,
      on: "keyup" //could be either "keyup" or "blur"
    }
  };
};

HTML:

<template name="insertUserForm">
    {{#autoForm schema="UserForm" additionalSchemas=warningSchema id="insertUserForm"}}
        <div class="form-group{{#if afFieldIsInvalid 'username'}} has-error{{/if}}{{#if afFieldIsInvalid 'username' type="warning"}} has-warning{{/if}}">
            {{afFieldLabel 'username'}}
            {{afFieldInput 'username'}}
            {{#if afFieldIsInvalid 'username'}}
            <span class="help-block">{{afFieldMessage 'username'}}</span>
            {{/if}}
            {{#if afFieldIsInvalid 'username' type="warning"}}
            <span class="help-block">{{afFieldMessage 'username' type="warning"}}</span>
            {{/if}}
        </div>
        <div class="form-group{{#if afFieldIsInvalid 'password'}} has-error{{/if}}{{#if afFieldIsInvalid 'password' type="warning"}} has-warning{{/if}}">
            {{afFieldLabel 'password'}}
            {{afFieldInput 'password'}}
            {{#if afFieldIsInvalid 'password'}}
            <span class="help-block">{{afFieldMessage 'password'}}</span>
            {{/if}}
            {{#if afFieldIsInvalid 'password' type="warning"}}
            <span class="help-block">{{afFieldMessage 'password' type="warning"}}</span>
            {{/if}}
        </div>
    <button type="submit" class="btn btn-primary insert">Insert</button>
    {{/autoForm}}
</template>

Each of the afField... helpers would accept an optional type attribute, which would link it up with that defined schema instead of the default validation schema. One or more of these would be defined in an object passed to additionalSchemas attribute on the autoForm helper.

This may be why you need keypress with throttling. hitting a key then quickly tabbing causes the last key to not trigger a validation.

I'm using the same form for insert/update. Let's say I'm in the middle of an inserting an object, and have already hit submit, I've got some errors showing and the validation mode has switched to on key up from on submit, and then I don't fix my errors. Instead, I go to edit another object, the field values update to those of the new object, but the old error messages stay in place, and validation mode doesn't revert back to on submit, so I press a key in the field and it reruns validation on the current value of the field and then the old error goes away.

I think you need to reset the validation state when the doc is switched out for another doc, but I'm not sure exactly how you would detect or define "switched out".

I would think it's a fairly straight forward fix to ensure validation is rerun when a field value changes due to a change via the doc attribute, because it is just another avenue thru which a field value can change. Therefore, this would be a great first step.

The second part, of knowing when to revert back to on submit, from on key up, because it is a different doc, might be harder to detect, but I figured I get the ball rolling on that conversation.

I can't see a way to specify the destination URL after a submit.

I created another Gist. Any ideas?

How can I create a form that populates two collections at the same time?
I have two models and I would like to concatenate the fields of those models in a single form with a single submit button.

This issue is a special case of the "relations between models" problem ( 1..1, 1..n, n..n) .

After updating autoform 0.4.4 to 0.4.7 and simple-schema 0.2.23 to 0.2.26, autoform is showing radios instead of checkboxes or a select instead of multiselect for a "type: [String]" field.
In simple-schema 0.2.25 happened some internal changes regarding arrays so maybe it's related to that.

It would be nice to have an option to allow forms to be valiated on the fly as users type. Similar to jqbootstrapvalidation

I'm having an issue with http://www.shinglecentral.com/ in production, IE is erroring on "class" in o (see screenshot) which is coming from autoform.

Can you verify if you're having any issues in IE9 too?

There should be a way to pull it out of the Template helpers or something. polluting the global scope isn't good.

Is it an idea to make this optional per-field and per-form? I'll try to come up with a patch this week

Is there support for embedded/foreign keys, where a document has an identifier to another document. In Rails or Django, it would be a foreign key and a html select field would be rendered.

hello,

I am passing the following data context from an iron-router route:

this.route('new', {
        template: 'ideaForm',
        data: function(){
            return {
                doc: Ideas.findOne(this.params._id),
                formType: 'insert'
            }
        }
    });

to my template which contains an autoform block:

<template name="ideaForm">
    {{#unless currentUser}}
        <div class="alert alert-info">You need to sign in to do this.</div>
    {{/unless}}
    {{#autoForm schema="IdeasForm" id="ideaForm" doc=doc}}
        {{afQuickField 'title'}}
        {{afQuickField 'details' rows="20"}}
        <button type="submit" class="btn btn-default {{formType}}">Save</button>
    {{/autoForm}}
</template>

As you can see what I am trying to do is to dynamically determine the form type ('insert', 'remove' or 'update') based on the data context;

However, what I can see is that {{formType}} doesnt appear to be working. How can i fix this?

Hi!

Great package! It already has the most needed features and I'm looking forward to see how this develops.

I'm struggling with confirmation removal. I can't get my confirmation to run before the removal.

Is it possible to build something directly into the package. This is an illustration of what I want to do: mfjohansson@1f64689

Thanks!