Schema
Color : {
optional: true,
autoform: {
type: "select-radio",
options: function () {
return [
{label: "orange", value: orange},
{label: "blue", value: blue},
{label: "red", value: red}
];
}
}
}
HTML Page:
{{> afFormGroup name="Color" type="select-radio" options=options}}
The checkbox buttons are not displayed, what am I doing wrong?
You need a type for you schema field as well. Not just the autoform field. Try this:
Color: {
optional: true,
type: String,
autoform: {
type: "select-radio",
options: function() {
return [{
label: "orange",
value: orange
}, {
label: "blue",
value: blue
}, {
label: "red",
value: red
}];
}
}
}
Another option is doing it like this if you want to save some typing (pardon the coffeescript)
color:
type: String
allowedValues: ['Red', 'Blue', 'Orange']
autoform:
type: 'select-radio'
Your html helper is wrong. The correct way to achieve this is
{{> afFormGroup name="Color" type="select-radio" }}
Notice that i just removed "options=options" from your original code
{{> afFormGroup name="Color" type="select-radio" options=options}}
Related
I'm using autoform on my meteor project and am using an afArrayField for my dimensions field in my NewStack form.
It currently looks like this.
And here's how it's being rendered:
NewStack.html
<template name="NewStack">
<div class="new-stack-container">
{{#autoForm collection=stacks id="insertStackForm" type="method" meteormethod="createStack" class="new-stack-form"}}
<fieldset>
<legend>Add a Stack!</legend>
{{> afQuickField name='desc'}}
{{> afArrayField name='dimensions'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</div>
</template>
What I would like to see for each of the dimensions fields is a dropdown populated with the options I set in the schema (i.e. dim1, dim2, and dim3). However I can't seem to get the form to render as anything other than a plain text input.
Stacks.js
StackSchema = new SimpleSchema({
desc: {
type: String,
label: "Description"
},
dimensions: {
type: [String],
autoform: {
type: "select",
afFieldInput: {
options: [
{label: "dim1", value: 1},
{label: "dim2", value: 2},
{label: "dim3", value: 3}
]
},
}
}
});
Interestingly, if I change the afArrayField to afQuickField in NewStack.html It appears that autoform can now see my options (but I lose the array functionality obviously)
Any thoughts? Is there something inherent about afArrayField that precludes me from using some kind of selection mode?
You can specify options for each element in an array using $:
const StackSchema = new SimpleSchema({
desc: {
type: String,
label: "Description"
},
dimensions: {
type: [String],
},
"dimensions.$": { // note this entry
type: String,
autoform: {
afFieldInput: {
options: [
{label: "dim1", value: 1},
{label: "dim2", value: 2},
{label: "dim3", value: 3}
]
},
}
}
});
It is mentioned in the autoform docs.
Try changing your schema to:
dimensions: {
type: [String],
autoform: {
type: "select",
options: [
{label: "dim1", value: 1},
{label: "dim2", value: 2},
{label: "dim3", value: 3}
],
}
I have the following schema:
GuestSchema = new SimpleSchema({
name: {
type: String,
label: 'Name'
}
code: {
type: String,
label: 'Code',
autoValue: function(){
return AutoForm.getFieldValue('name', 'insertGuestForm');
},
autoform: {
type: 'hidden'
}
}
});
<template name="NewGuest">
<div class="new-guest">
{{> quickForm collection="Guests" id="insertGuestForm" type="insert" class="new-guest-form"}}
</div>
</template>
but AutoForm.getFieldValue isn't working as expected. I want to get the field value of name and save it with the property code in my DB.
ok, I have to use this.field("name");
GuestSchema = new SimpleSchema({
name: {
type: String,
label: 'Name'
}
code: {
type: String,
label: 'Code',
autoValue: function(){
var content = this.field("name");
return content.value;
},
autoform: {
type: 'hidden'
}
}
});
Below is my nested schema. name.first is required. but when I submit the form it not validating, it allows empty string. did I missed anything? or How to fix this issue?
Schema.UserProfile = new SimpleSchema({
'name.first': {
type: String,
max: 50,
label: "First name"
},
'name.last': {
type: String,
optional: true,
max: 50,
label: "Last name"
}
});
Schema.User = new SimpleSchema({
profile: {
type: Schema.UserProfile,
optional: true
},
});
Meteor.users.attachSchema(Schema.User);
form:
{{#autoForm id="profile" type="method-update" meteormethod="updateProfile" schema=userSchema doc=currentUser collection=Users}}
{{> afQuickField name="profile.name.first" autofocus='' formgroup-class="col-xs-6"}}
{{> afQuickField name="profile.name.last" formgroup-class="col-xs-6"}}
{{/autoForm}}
I have checked your schema
Schema is looking good but you will have add object for the name.
Schema.UserProfile = new SimpleSchema({
'name': {
type: Object,
optional: false
},
'name.first': {
type: String,
max: 50,
label: "First name"
},
'name.last': {
type: String,
optional: true,
max: 50,
label: "Last name"
}
});
I am using autoform in my project and getting this error when I open the form
Not sure if this is because of any versions or dependency, my autoform is not working and I am getting this error, I have the screenshot and the schema code, form code below,
template
<template name="assesmentNew">
{{#ionModal customTemplate=true}}
{{# autoForm collection="Assesments" id="assesments-new-form" type="insert"}}
<div class="bar bar-header bar-stable">
<button data-dismiss="modal" type="button" class="button button-clear">Cancel</button>
<h2 class="title">New 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>
Collection
Assesments = new Mongo.Collection('assesments');
Assesments.before.insert(function (userId, doc) {
doc.createdAt = new Date();
});
Assesments.attachSchema(new SimpleSchema({
name: {
type: String,
label: 'First Name',
autoform: {
'label-type': 'floating',
placeholder: 'First Name'
}
},
email: {
type: String,
label: 'Email',
autoform: {
'label-type': 'floating',
placeholder: 'Email'
}
},
category: {
type: String,
label: 'Category',
optional: true,
autoform: {
options: [
{value: 'General', label: 'General'},
{value: 'Reported', label: 'Reported'},
{value: 'Follow Up', label: 'Follow Up'}
],
type: 'select-radio'
}
},
assesmentDate: {
type: Date,
label: 'Assesment Date',
optional: true
},
location: {
type: String,
label: 'Location',
autoform: {
'label-type': 'floating',
placeholder: 'Location'
},
max: 200
},
createdBy: {
type: String,
autoValue: function() {
return this.userId
}
}
}
));
if (Meteor.isServer) {
Assesments.allow({
insert: function (userId, doc) {
return true;
},
update: function (userId, doc, fieldNames, modifier) {
return true;
},
remove: function (userId, doc) {
return true;
}
});
}
This is a issue with the new patch for autoform-ionic to the new versions of autoform.
Apparently some labels are skipped, some not (see here). In order to fix that and avoid this error when your input type is not there (for example, type = number), all your schema fields that are being rendered by autoform must have a label-type option defined:
...
autoform: {
'label-type': 'placeholder',
placeholder: 'Linha'
}
Here's my schema:
TestCollection = new Meteor.Collection('test_collection');
var Schemas = {};
Schemas.TestCollection = new SimpleSchema({
servicesSelected: {
type: [Object]
},
"servicesSelected.0.selected" : {
type: Boolean,
optional: false
},
"servicesSelected.0.sku" : {
type: String,
optional: true
},
"servicesSelected.0.title" : {
type: String,
optional: true
},
"servicesSelected.0.price": {
type: Number,
optional: true
},
"servicesSelected.1.selected" : {
type: Boolean,
optional: false
},
"servicesSelected.1.sku" : {
type: String,
optional: true
},
"servicesSelected.1.title" : {
type: String,
optional: true
},
"servicesSelected.1.price": {
type: Number,
optional: true
}
});
TestCollection.attachSchema(Schemas.TestCollection);
My Template:
<template name="test">
{{#autoForm validation="keyup" collection="TestCollection" id="order-submission-test-form" type="insert"}}
<h1>Doing everything manually and specifying the data-schema-key:</h1>
<input type="checkbox" name="servicesSelected.0.selected" data-schema-key="servicesSelected.0.selected">
<label>HDR Photos</label>
<input type="checkbox" name="servicesSelected.1.selected" data-schema-key="servicesSelected.1.selected">
<label>Panos</label>
{{/autoForm}}
</template>
Whenever I click on the checkbox or try to validate the form I get a Cannot read property 'blackbox' of undefined error in the console. What am I doing wrong?
servicesSelected is supposed to be an array that contains hash tables on each index.
So something like:
serviceSelected = [
{
selected: true,
sku: "123",
title: "title1",
price: 100
},
{
selected: false,
sku: "124",
title: "title2",
price: 150
}
]
Just had the same issue, I would try getting rid of all numbers within your sub-object definitions. So I would try doing "servicesSelected.$.selected" instead of "servicesSelected.0.selected".
Worked for me, hopefully it works for anyone else with this strange issue.