javascriptnode.jsmeteormongoose-schemameteor-autoform

How to make one field Dependent on other field's value in meteor autoform?


i'm new to meteor and i want to create a form in which the value of one field decides the value of another field in the autoform. Let us take setup types as "A","B",and "C", so when I select "A" a autoform will be loaded. I have made this form as generic i.e it will be displayed for all A,B,and C.

{{#each users}}
        {{> afQuickField name='userEmail' value=userEmail readOnly=true }}
        {{> afQuickField name='Setup' value=type readOnly=true}}  
        {{> afQuickField name='Profile' options='allowed' }}
        {{> afQuickField name='Purpose' }}
        {{> afQuickField name='count' options='allowed' }}
        {{> afQuickField name='PackageDirectory' options='allowed'  }}
        {{> afQuickField name="logName" options=LogName }}
 {{/each}}

The count options should be:
1. For "A" count options should be 9,11,12.
2. For "B" it's 1.
3. For "C" it's 5.
In schema I have written code like this

Setup:{
        type: String,
        label:"Setup",
        optional:false,
       defaultValue:type
      },
 count:{
        type: String,
        label:"No. Of count",
         optional: true,
        allowedValues:["9","11","12"],
        autoform:{
          afFieldInput:{
            firstOption:"(Select the count)"
          }
        }
  }

So when i select setup "A" i should get the three dropdown options and when i click "B" and "C" i should get the default value as 1 and 5 respectively. Can anyone give solution to my problem?


Solution

  • You can use getFieldValue to get a particular field's value, and based on it return a set of option or defaultValue from the template helper. Documentation is found here

    So in accordance with your code:

    form.html:

        ...
    {{#autoForm id="sampleFormID" ... ... }}
        {{> afQuickField name='Setup' value=type readOnly=true}}  
         {{> afQuickField name='count' options=allowedOptionHelper defaultValue=defaultValueHelper }}
        ...
    
    {{/autoForm}}
    

    form.js

    Template.templateName.helpers({
    
        allowedOptionsHelper: function() {
            if (AutoForm.getFieldValue('Setup', 'sampleFormID') === 'A') {
                return [{label:"9", value:"9"},{label:"11",value:"11"},{label:"12", value:"12"}];
                else
                if (AutoForm.getFieldValue('Setup', 'sampleFormID') === 'B') {
                    // return the options for B
                } else if (AutoForm.getFieldValue('Setup', 'sampleFormID') === 'C')) {
                // return the options for C
            }
        },
    
        defaultValueHelper: function() {
            if (AutoForm.getFieldValue('Setup', 'sampleFormID') === 'A') {
                return 11 //or whatever the defaultValue is;
            }
            //likewise for options B and C
        }
    
    });
    

    schema.js

    ...
    ...
     count:{
            type: String,
            label:"No. Of count",
             optional: true,
            autoform:{
              afFieldInput:{
                firstOption:"(Select the count)"
              }
            }
      }
    ...
    ...