meteormeteor-autoform

how to enable or disable editing of a field value depending on another field's value?


I have two fields, one which need to be dependent on the other field's value. The 1st field is "RELEASE" which has "latest" and "on-going" as the dropdown options. The 2nd field is "BUILD" which should be editable only when we select "on-going" as the release. When the release is "latest" it should take a default value and not be editable.

test.html

{{> afQuickField name='Release' options='allowed'  }}
<span title = "eg:PRODUCT/10.X.X.1234 or PRODUCT:latest">
  <a style="font-size:1.2em"><h5>ProductBuild</h5></a>
</span>
{{> afQuickField name='PRODUCT_BUILD' }}

I'm also trying to set the tool tip for PRODUCT_BUILD field so that when a user hover over it, he/she will know the correct format like "PRODUCT:latest" for Latest and "PRODUCT/10.X.X.1234" for "On-going".

schema.js

Release:{
  type: String,
  label: "Release",
  optional: true,
  allowedValues:["LR-Latest Release","OR-Ongoing Release"],
  autoform:{
    afFieldInput:{
      firstOption:"(Select the Release)"
    }
  }
},
PRODUCT_BUILD:{
  type:String,
  label:' ', 
  regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
  defaultValue:"PRODUCT:latest"
},

How can I do this?


Solution

  • One of two ways of doing this:

    One: Use readonly property within the autoform.

    Release:{
      type: String,
      label: "Release",
      optional: true,
      allowedValues:["LR-Latest Release","OR-Ongoing Release"],
      autoform:{
        afFieldInput:{
          firstOption:"(Select the Release)"
        }
      }
    },
    PRODUCT_BUILD:{
      type:String,
      label:' ', 
      regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
      defaultValue:"PRODUCT:latest",
      autoform:{
        readonly: function(){
          if(AutoForm.getFieldValue('Release') == 'on-going'){
            // if the above does not get you the "Release" field's value then try:
            // AutoForm.getFieldValue('Release','formID');
            // if your formID is dynamically set, then use AutoForm.getFormId(); to get the form's ID
            return false;
          }
          else {
            return true;
          }
        }
      }
    },
    

    Two: Use a custom function to set/unset readonly property

    Release:{
      type: String,
      label: "Release",
      optional: true,
      allowedValues:["LR-Latest Release","OR-Ongoing Release"],
      autoform:{
        afFieldInput:{
          firstOption:"(Select the Release)"
        }
      },
      custom: function(){
        if(this.value == 'on-going'){
          $('[name=PRODUCT_BUILD]').prop('readonly', true);
        }
        else {
          $('[name=PRODUCT_BUILD]').prop('readonly', false);
        }
      }
    },
    PRODUCT_BUILD:{
      type:String,
      label:' ', 
      regEx: /^(PRODUCT)(\/|:)((([0-9]+\.)+[0-9]+)|(latest))/,
      defaultValue:"PRODUCT:latest",
    },
    

    You can play around with both methods here before you actually try implementing it.