6

別のフィールドに応じてサブスキーマ (オブジェクト) のフィールドを動的に表示するための最良の方法は何ですか? 次の例では、ドキュメント (Schemas.Main) に Schemas.Items で定義された複数のアイテムを含めることができます。項目の入力に必要なフィールドは、選択したタイプによって異なります。

たとえば、ユーザーが type=="type1" を選択した場合、フィールド "type1_field1" および "type1_field2" に入力する必要があります。

ソリューションでは、おそらく autoForm を使用し、AutoForm.getFieldValue と afArrayField の設定フィールドを組み合わせる必要がありますね。多くの組み合わせを試しましたが、アイテムを追加する機能が失われるか (プラス記号がない)、別のアイテムを追加できません (つまり、すべてのアイテムがタイプ 1 です)。これを解決するためのヒントはありますか？

//Schemas.js
Schemas = {}; Collections = {};
Main = Collections.Main = new Mongo.Collection("Main");
Main.attachSchema(Schemas.Main);
Meteor.isClient && Template.registerHelper("Schemas", Schemas);

Schemas.Main = new SimpleSchema({
  name: {
    type: String
  },
  items: {
    type: [Schemas.Items]
  }
});

Schemas.Items = new SimpleSchema({
      type: { //FormActions...
          type: String,
          allowedValues: ['type1', 'type2', 'type3'],
          autoform: {
              type: "selectize"
          }
      },
      type1_field1: {
        type: String
      },
      type1_field2: {
        type: String
      },
      type2_field1: {
        type: String
      },
      type2_field2: {
        type: String
      },
      type3_field1: {
        type: String
      },
      type3_field2: {
        type: String
      }            
});

//form.html
{{#autoForm id="testForm" type="insert" collection=Collections.Main}}
     {{> afFieldInput name='name'}}

     {{> afArrayField name='items' fields="items.$.type, items.$.type1_field1"}} //How to set these fields dynamically depending on type?

    <div class="form-group">
      <button type="submit" class="btn btn-primary">Create</button>
    </div>
{{/autoForm}}
4

2 に答える 2

0

ミリアムの答えに基づいて、物事を機能させるために私がしたことも共有したいと思います。有利かもしれません。

スキーマ -> アクション

Schemas.actions = new SimpleSchema({
  actions                : {
    type    : Array,
    optional: false,
    minCount: 1,
    autoform: {
      name: "actions"
    }
  },
  "actions.$"            : {
    type: Object
  },
  "actions.$.action_type": {
    type    : String,
    optional: false,
    label   : "Action Type",
    autoform: {
      type   : "select",
      class  : "action_type form-control",
      name   : "action_type",
      label  : "Select type of action",
      options: function()
      {
        let returnValue = [
          {label: "Action 1", value: "action_1"},
          {label: "Action 2", value: "action_2"},
        ];

        return returnValue;
      }
    }
  },
  "actions.$.action_1" : {
    type    : Schemas.action1,
    minCount: 1,
    optional: true,
    label   : "Action 1",
  }
});

スキーマ -> アクション 1

Schemas.action1 = new SimpleSchema({
  "action1_to"     : {
    type    : String,
    optional: false,
    label   : "Email To",
    autoform: {
      type       : "text",
      label      : "Email To",
      placeholder: "Comma seperated values...",
      class      : "form-control"
    }
  },
  "action1_cc"     : {
    type    : String,
    optional: true,
    label   : "Email Cc",
    autoform: {
      type       : "text",
      label      : "Email Cc",
      placeholder: "Comma seperated values...",
      class      : "form-control"
    }
  },
  "action1_subject": {
    type    : String,
    optional: false,
    label   : "Subject",
    autoform: {
      type       : "text",
      label      : "Subject",
      placeholder: "Subject for the Email",
      class      : "form-control"
    }
  },
  "action1_body"   : {
    type    : String,
    optional: false,
    label   : "Email Content",
    autoform: {
      label      : "Email Content",
      rows       : 6,
      class      : "form-control auto-size",
      placeholder: "Email Content goes here...",
      style      : "font-size: 120%;"
    }
  }
});

Schemas.action1 は Schemas.actions の前にロードする必要があることに注意してください。そうしないと、フォームの代わりにテキストボックスがレンダリングされるだけになります

テンプレート

<template name="actions">
    {{#autoForm id="actions-form" doc=step.data schema=schema}}
        {{> afArrayField name="actions" template="actions" step=step}}
        {{> wizardButtons}}
    {{/autoForm}}
</template>

<template name="afArrayField_actions">
    <div class="panel panel-default">
        <div class="panel-heading">{{afFieldLabelText name=this.atts.name}}</div>
        {{#if afFieldIsInvalid name=this.atts.name}}
            <div class="panel-body has-error">
                <span class="help-block">{{{afFieldMessage name=this.atts.name}}}</span>
            </div>
        {{/if}}
        <ul class="list-group">
            {{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
                <li class="list-group-item autoform-array-item">
                    <div>
                        <div class="autoform-remove-item-wrap">
                            {{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
                                <button type="button" class="btn btn-primary autoform-remove-item"><span
                                        class="glyphicon glyphicon-minus"></span></button>
                            {{/if}}
                        </div>
                        <div class="autoform-array-item-body">
                            {{> afQuickField name=this.current.action_type label=false options=actionOptions}}

                            {{> UI.dynamic template=currentFieldValue data=this }}

                        </div>
                    </div>
                </li>
            {{/afEachArrayItem}}
            {{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
                <li class="list-group-item">
                    <button type="button" class="btn btn-primary autoform-add-item"
                            data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}"
                            data-autoform-maxCount="{{this.atts.maxCount}}"><span
                            class="glyphicon glyphicon-plus"></span></button>
                </li>
            {{/if}}
        </ul>
    </div>
</template>

<template name="action_1">
    {{> afQuickField name=this.current.action_1 }}
</template>

form-wizardパッケージ{{> wizardButtons}}を使用しているため、テンプレートに表示されます

およびcurrentFieldValueヘルパーのTemplate.registerHelper

Template.registerHelper("currentFieldValue", function()
{
  let val = AutoForm.getFieldValue(this.current.action_type, "actions-form");
  return val || null;
});

これが誰かに役立ち、時間を節約できることを願っています。

このソリューションを提供してくれたマリアムに感謝します

于 2016-03-01T04:38:03.520 に答える