meteoric autoform select-radio does not work - meteor

The field does not exists in the Schema of form,
i am using ionic template in form, this code does not work to me:
Template.example.helpers({
cardOptions: [
{ value: 0, label:'Visa' },
{ value: 1, label:'MasterCard' },
{ value: 2, label:'Elo' },
{ value: 3, label:'Hipercard' },
{ value: 4, label:'Hiper' }
]
});
<template name="example">
{{> afQuickField name="payment.card" type="select-radio" options=cardOptions }}
</template>

You need to use the autoForm component if you want to define fields individually.
For example:
<template name="example">
{{#autoForm collection="Payments" id="insertPaymentForm" type="insert"}}
<fieldset>
<legend>Add a Payment Method</legend>
{{> afQuickField name='title'}}
{{> afQuickField name="card" type="select-radio" options=cardOptions }}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
Here is a MeteorPad.

Related

MeteorJS update AutoForm not loading doc

I have a template with an update Autoform:
<template name = "editLocationPage">
<div class="flow-text">
{{#if Template.subscriptionsReady}}
<div>
<br>
{{#autoForm collection="Locations" doc=currentDoc id="editLocationPage" type="update"}}
<fieldset>
{{testDoc}}
<legend>Edit Location / Asset</legend>
{{> afQuickField name='id'}}
{{> afQuickField name='text'}}
{{> afQuickField name='description' rows=3}}
{{> afQuickField name='type'}}
{{> afQuickField name='parent'}}
</fieldset>
<button type="submit" class="btn waves-effect waves-light">Submit</button>
<button type="reset" class="btn waves-effect waves-light red">Reset</button>
{{/autoForm}}
</div>
{{/if}}
</div>
</template>
Some helpers to subscribe and pass the doc to the template:
Template.editLocationPage.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('singleLocation', Session.get("idTreeView").toString());
});
});
Template.editLocationPage.helpers({
currentDoc: function() {
return Locations.find({"id":Session.get("idTreeView").toString()}).fetch()[0];
}
});
A schema:
// Data subset subscribed to on client
Meteor.publish('locations', function() {
return Locations.find({}, {fields: {
text: true,
id: true,
type:true,
parent:true
}});
});
Meteor.publish('singleLocation', function(locationId) {
return Locations.find({id:locationId});
});
The document is ok (findOne returns a valid doc) but the form does not work. Any ideas?
I just found the problem. I needed to add the schema:
{{#autoForm schema=locationFormSchema id="editLocationPage" type="update" collection=Locations doc=currentDoc}}
with a helper:
Template.editLocationPage.helpers({
currentDoc: function() {
return Locations.findOne({"id":Session.get("idTreeView").toString()});
},
locationFormSchema: function() {
return Schema.locations;
}
});

Meteor Flow Router issue with update

I have a Meteor app and I'm transitioning from IronRouter to FlowRouter. So far so good, but there are aspects I don't understand yet.
I have a route as follows:
FlowRouter.route('/documents/:docId/edit', {
name: 'documentEdit',
subscriptions: function (params, queryParams) {
this.register('documentEdit', Meteor.subscribe('documentSingle', params.docId));
},
action: function (params, queryParams) {
BlazeLayout.render('layout', { top: 'header', main: 'documentEdit' });
},
});
First option:
Then I also have a template:
<template name="documentEdit">
<div class="container">
<h1>Edit document</h1>
{{#if isReady 'documentEdit'}}
{{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
<fieldset>
{{> afQuickField name='title'}}
{{> afQuickField name='content' rows=6}}
</fieldset>
<button type="submit" class="btn btn-primary">Update</button>
<a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
{{/autoForm}}
{{/if}}
</div>
</template>
with a template helper as follows:
Template.documentEdit.helpers({
isReady: function(sub) {
if(sub) {
return FlowRouter.subsReady(sub);
} else {
return FlowRouter.subsReady();
}
}
});
This is as it is mentioned here, but I'm not getting the values pre-filled in the textboxes on the UI (which is normal when editing fields).
Second option:
When I do the following it works and I don't really understand why it works (found it browsing in different forums and tried it out):
<template name="documentEdit">
<div class="container">
<h1>Edit document</h1>
{{#with getDocument }}
{{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
<fieldset>
{{> afQuickField name='title'}}
{{> afQuickField name='content' rows=6}}
</fieldset>
<button type="submit" class="btn btn-primary">Update</button>
<a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
{{/autoForm}}
{{/with}}
</div>
</template>
and the helper:
Template.documentEdit.helpers({
getDocument: function () {
return Documents.findOne();
}
});
So the questions are:
for the 1st option: any idea why it does not work. I would prefer that one as it's the documented way of doing things
for the 2nd option: not sure why I need (in the template helper) to do a Document.findOne() without even having to pass the id of the doc I want to edit:
You want to do template level subscriptions with Flow Router, that's one of the primary pattern changes.
So you'd do:
Setup the subscription at the template level. Autorun so it'll resubscribe on route changes.
Template.documentEdit.onCreated(function() {
var self = this;
this.autorun(function() {
var docId = FlowRouter.getParam('docId');
self.subscribe('documentSingle', docId));
};
};
Setup the template helper to pick up from the route, and grab the id and populate the helper/document.
Template.documentEdit.helpers({
getDocument: function () {
var docId = FlowRouter.getParam('docId');
var doc = Documents.findOne(docId) || {};
return doc;
}
});
Do a template level load check and if it's there render it, otherwise show loading...
<template name="documentEdit">
<div class="container">
<h1>Edit document</h1>
{{#if Template.subscriptionReady}}
{{#with getDocument }}
{{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
<fieldset>
{{> afQuickField name='title'}}
{{> afQuickField name='content' rows=6}}
</fieldset>
<button type="submit" class="btn btn-primary">Update</button>
<a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
{{/autoForm}}
{{/with}}
{{else}}
Loading...
{{/if}}
</div>
</template>
Not knowing how this worked, seeing that all the tutorials I have read that deals with update used Iron router, I have spent 7 days worth of trying retrying, looking through others code, reading tutorials. Happy it now works.

PickAdate not working with autoform materialize

i get the below error when trying to use PickAdate with gildaspk:autoform-materialize version :0.0.7
here's my schema field :
when: {
type: Date,
autoform: {
type: 'pickadate'
}
here's my form declaration :
{{#autoForm id="addEvents" collection="Events" type="insert"}}
{{> afFieldInput name='when' type="pickadate"}}
<div>
<button type="submit">Submit</button>
</div>
{{/autoForm}}

Template helper not invoked on update aldeed autoform

I am using meteoric-autoform and doing an update to my values, The form is not getting populated with existing values and also the update is not happening.
I could also see that the template helper method that I have for fetching the id is not getting invoked at all.
assesmentEdit.js
Template.assesmentEdit.helpers({
assesment: function () {
alert("entered helper");
console.log(template.data.id);
var template = Template.instance();
return Assesments.findOne({_id: template.data.id});
}
});
assesmentEdit.html
<template name="assesmentEdit">
{{#ionModal customTemplate=true}}
{{# autoForm collection="Assesments" id="assesments-edit-form" type="update"}}
<div class="bar bar-header bar-stable">
<button data-dismiss="modal" type="button" class="button button-clear">Cancel</button>
<h2 class="title">Edit Assesment</h2>
<button type="submit" class="button button-positive button-clear">Save</button>
</div>
<div class="content has-header overflow-scroll">
{{> afQuickField name="name" }}
{{> afQuickField name="email"}}
{{> afQuickField name="category"}}
{{> afQuickField name="location"}}
</div>
{{/autoForm}}
{{/ionModal}}
</template>
As you can see in the docs, update forms require a doc attribute.
{{# autoForm doc=assesment collection="Assesments" id="assesments-edit-form" type="update"}}

meteor autoform _id field

I have this Schema :
Schemas = {};
Schemas.Id = {
type: String,
optional: true,
label: 'Id',
//max: ID_LENGTH,
defaultValue : Random.id(ID_LENGTH),
denyUpdate: true
};
Schemas.Name = {
type: String,
label: 'Name',
max: 75
};
Schemas.Description = {
type: String,
label: 'Description',
max: 500,
optional: true,
autoform: {
rows: 5
}
};
//-- Attribute
Schemas.Attribute = {
_id: Schemas.Id,
attribute_name : Schemas.Name,
attribute_description : Schemas.Description
};
Collections.Attributes.attachSchema(Schemas.Attribute);
i have a request from client they can insert _id manually.
but autoform cant permit it,
this the template :
<template name="pg_attr_insert">
{{#autoForm _id="afInsertDemo" type="insert" collection=Collections.Attributes}}
<div class="form-group {{#if afFieldIsInvalid name='_id'}}has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='_id'}}</label>
{{> afFieldInput name='_id'}}
{{#if afFieldIsInvalid name='_id'}}
<span class="help-block">{{{afFieldMessattribute_description name='_id'}}}</span>
{{/if}}
</div>
<div class="form-group {{#if afFieldIsInvalid name='attribute_name'}}has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='attribute_name'}}</label>
{{> afFieldInput name='attribute_name'}}
{{#if afFieldIsInvalid name='attribute_name'}}
<span class="help-block">{{{afFieldMessattribute_description name='attribute_name'}}}</span>
{{/if}}
</div>
<div class="form-group {{#if afFieldIsInvalid name='attribute_description'}}has-error{{/if}}">
<label class="control-label">{{afFieldLabelText name='attribute_description'}}</label>
{{> afFieldInput name='attribute_description'}}
{{#if afFieldIsInvalid name='attribute_description'}}
<span class="help-block">{{{afFieldMessattribute_description name='attribute_description'}}}</span>
{{/if}}
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Add Person</button>
<button type="reset" class="btn btn-default">Reset Form</button>
</div>
{{/autoForm}}
</template>
this is the error :
Uncaught Error: Every autoForm and quickForm must have an "id"
attribute set to a unique string.
is there anyway autoform permit insert _id manually? and how?
Oke i know my false, i create
{{#autoForm _id="afInsertDemo" type="insert" collection=Collections.Attributes}}
i just convert it to :
{{#autoForm id="afInsertDemo" type="insert" collection=Collections.Attributes}}

Resources