动态表单泛化和使用流星和Aldeed的自动表单删除

Dynamic form generalion and removal using meteor and Aldeed's autoform

本文关键字：表单 Aldeed 删除泛化动态流星更新时间：2023-09-26

我正在使用meteor和Aldeed的自动表单来填充我的数据库。我想要实现的基本功能是这样的：

将主体窗体正常链接到集合。
在主体窗体中，有一个按钮add secondary该按钮可动态添加链接到不同集合的窗体。
第二个表单有一个remove按钮，可以删除它。

我遵循了此处概述的技术，并将以下代码放在一起：

        <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

这段代码工作正常，只有一个我不明白的错误：

我首先添加 3 个辅助形式，并将值分别放在这三个形式的fieldA中abc、efg、hij。
然后我用efg删除了第二个次要形式，我得到的是剩下的是abc和efg！
更奇怪的是，当我检查已删除表单的uniqid是预期的（并且对应于上一个efg）。

因此，当我动态删除表单时，我键入的值似乎以某种方式保留下来。

任何人都可以帮忙：

正在做的事情出了什么问题，我该如何解决？
有没有更好的方法来做我想做的事情？

我也试图在这里检查答案，但提供的链接已断开。

谢谢

我通过完全使用 aldeed:autoform 和 aldeed:collection2 来生成我的表单而不是手动插入辅助模板来解决这个问题。

这可以通过像往常一样创建两个所需的架构，然后将辅助架构作为数组放在主架构上来实现。

然后是使用自动表单中的{{> 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}}