I am using meteor and Aldeed's autoform to populate my database. The basic functionality I want to achieve is this:
add secondary
which dynamically adds forms linked to a different collection.remove
button which removes it.I followed the technique outlined here and put together the following code :
<template name="PricipalForm">
{{#autoForm collection="principal" id="Principalform" type="insert" }}
<fieldset>
<legend>Principal form</legend>
{{> afQuickField name='field1'}}
{{> afQuickField name='field2'}}
<button id='add-inputs' type="button">
Add Proposal
</button>
{{#each inputs}}
{{> AddSecond}}
{{/each}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
./Templates/PrincipalForm.html
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
Template.PrincipalForm.onCreated(function() {
Session.set('props', []);
});
Template.Create.events({
'click #add-inputs': function () {
var inputs = Session.get('inputs');
var uniqid = Math.floor(Math.random() * 100000); /
inputs.push({uniqid: uniqid});
Session.set('inputs', inputs);
}
});
Template.Create.helpers({
inputs: function(){
return Session.get('inputs');
}
});
./Templates/PrincipalForm.js
////////////////////////////////////////////////////
///////////////////////////////////////////////////
<template name ="SecondaryFrom">
{{#autoForm collection="secondary" id="secondaryForm" type="insert" }}
<fieldset>
<legend> One instance of secondary form </legend>
{{> afQuickField name='fieldA' }}
{{> afQuickField name='fieldB'}}
</fieldset>
<button class='remove-inputs' uniqid="{{uniqid}}" type="button">Remove</button>
{{/autoForm}}
</template>
./Templates/SecondaryForm.html
//////////////////////////////////////////
//////////////////////////////////////////
Template.AddProposal.events({
'click .remove-inputs': function(event) {
var uniqid = $(event.currentTarget).attr('uniqid');
var props = Session.get('inputs');
props = _.filter(props, function(x) { return x.uniqid != uniqid; });
Session.set('inputs', inputs);
},
});
./Templates/SecondaryForm.js
This code works fine, there is only one bug that I do not understand:
abc
, efg
, hij
in fieldA
of these three forms respectively.efg
and what I get is that the remaining ones are abc
and efg
!!uniqid
of the removed form is the one expected (and corresponding to the previous efg
).So it seems that when I remove the form dynamically, the values that I type in persist somehow.
Can anyone please help out:
I also tried to check the answer here , but the links provided were broken.
Thanks
答案 0 :(得分:0)
我通过完全使用aldeed:autoform
和aldeed:collection2
来解决此问题,以便生成表单,而不是手动插入辅助模板。
这可以通过像往常一样创建两个想要的模式,然后将二级模式作为一个数组放到主模式上来实现。
然后问题是在autoform中使用{{> afArrayfield}}
来实现问题中概述的预期结果。
代码看起来像这样:
//Schema definition:
Primary = new Mongo.collection('Primary');
secondary = new SimpleSchema({
/* ... */
});
primary = new SimpleSchema({
/*...*/
secondaries:{
type:[secondary]
}
});
Primary.attachSchema(primary);
//On the HTML form:
{{autoform collection="Primary" id= "form_example" type="insert"}}
<fieldset>
/* any fields*/
{{afArrayField name = 'secondaries'}}
</fieldset>
{{/autoform}}