Dates go missing when I add additional items - meteor

I have a strange situation. When I fill in the date field and click the autoform-add-item button the date data disappears but the qualification field data doesn't. The only way to keep the date field entry is to submit the form. Any thoughts.
Path: dbExample
"profile": {
"CV": {
"education": [
{
"qualification": "Arts Degree",
"startDate": "2009-01-01T00:00:00.000Z",
"endDate": "2013-12-01T00:00:00.000Z"
},
{
"qualification": "Science Degree",
"startDate": "2007-01-01T00:00:00.000Z",
"endDate": "2008-12-01T00:00:00.000Z"
}
]
}
}
Path: autoform.html
<template name="education">
{{#autoForm collection="Meteor.users" id="educationForm" doc=currentUser type="update"}}
{{> afQuickField name='profile.CV.education'}}
<button type="submit" class="btn btn-primary submit">Update</button>
{{/autoForm}}
</template>
Path: Schema.js
Schema.Education = new SimpleSchema({
qualification: {
type: String,
optional: true
},
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "M yyyy",
startView: "months",
minViewMode: "months"
}
}
},
endDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "M yyyy",
startView: "months",
minViewMode: "months"
}
}
},
});
Schema.CV = new SimpleSchema({
education: {
type: [Schema.Education],
optional: true
}
});

I think you need to do something like this:
{{#autoForm collection="Meteor.users" id="educationForm" doc=currentUser type="update"}}
{{#afEachArrayItem name="profile.CV.education"}}
{{> afFieldInput name=this.current.qualification}}
{{> afFieldInput name=this.current.startDate}}
{{> afFieldInput name=this.current.endDate}}
{{/afEachArrayItem}}
{{/autoForm}}
Autoform can't handle arrays of objects by default with quick field, so you need to construct it more manually.

Related

Creating an array form where each element is a 'select' type

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}
],
}

meteor autoform required validation not working with nested schema

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"
}
});

Meteor Autoform/SimpleSchema - quickform (type="update") not working

I have what I thought was a simple SimpleSchema with which I currently have two templates. One contains a quickform to insert a new document into the collection, the other is also a quickform which should update the document from the first template.
The insert form works fine, however when I try and load the update template, my console shows the following error and the submit button won't work. According to people who had similar problems, the error is normally caused by a recursive function, but I can't find one anywhere.
Exception from Tracker recompute function:
debug.js:41 RangeError: Maximum call stack size exceeded
at Object (native)
at isObject (http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1000:18)
at isBasicObject (http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1024:10)
at parseObj (http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1147:15)
at http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1159:11
at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:159:22)
at parseObj (http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1155:9)
at http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1159:11
at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:159:22)
at parseObj (http://localhost:3000/packages/aldeed_simple-schema.js?e210968641793751997ffe233af33b53af8566e4:1155:9)
Here are my two templates:
<template name="newWeddingPage1">
<div class=" col-sm-10 col-sm-offset-1">
<div class=" col-md-6">
<div class="well well-sm">
{{> quickForm collection="Weddings" id="insertWeddingInfo1" omitFields="email, phone, name, price" type="insert"}}
</div>
</div>
<div class=" col-md-6">
<div class="well well-sm">
{{#each theweddingdetails}}
<h1 id="price">{{duration}}</h1>
{{/each}}
</div>
</div>
</div>
</template>
<template name="newWeddingPage2">
<div class=" col-sm-10 col-sm-offset-1">
<div class=" col-md-6">
<div class="well well-sm">
{{#each theweddingdetails}}
{{> quickForm collection="Weddings" id="updateWeddingInfo1" doc="this" omitFields="email, phone, name, price" type="update"}}
{{/each}}
</div>
</div>
</div>
</template>
and my simple schema here:
Weddings.attachSchema(new SimpleSchema({
address: {
type: String,
label: "Address",
optional: true
},
startDate: {
type: Date,
label: "Date of shooting",
optional: false,
},
startTime: {
type: String,
optional: true,
autoform: {
afFieldInput: {
type: "time"
}
}
},
duration: {
type: Number,
label: "Duration (in hours)",
optional: true
},
price: {
type: Number,
label: "Price",
optional: true,
autoform: {
type: "hidden",
label: false
},
autoValue:function(){ return 0 }
},
email: {
type: String,
optional: true,
autoform: {
afFieldInput: {
type: "email"
}
}
},
phone: {
type: Number,
optional: true,
autoform: {
afFieldInput: {
type: "tel"
}
}
},
name: {
type: String,
label: "Contact Person",
optional: true
},
createdBy: {
type: String,
autoform: {
type: "hidden",
label: false
},
autoValue:function(){ return this.userId }
},
createdAt: {
type: Date,
autoform: {
type: "hidden",
label: false
},
autoValue:function(){ return new Date(); }
}
}));
Anybody have a clue where I'm going wrong?
Have been playing around with bits for the last few hours now :/
In your update form, you have doc="this" , which means you are just passing a string "this" as your doc.
Try doc=this , without quotes. That way, you'll be passing the context variable this as your doc. I am assuming in your router or elsewhere you have passed the appropriate doc as your data context so that it will be available in this

TypeError: Cannot read property 'slice' of null

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'
}

How to implement radio button in autoform meteorJS

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}}

Resources