CODEWITHSUNDEEP
meteormeteor-autoform
Bernd Loigge
Bernd Loigge

Reputation: 1677

Meteor Autoform - Prevent Field from Update

In my autoform the value of a field is the difference of two other input fields. It is not allowed to be updated by the user. Unfortuantly at the moment it is not possible to set a single field to readonly in a form. So my approach is to create an autoValue and a custom Validation to prevent an update

My code so far:

        'SiteA.Settings.RXSignalODU1difference': {
            type: Number,
            label: "RX Signal [dBm] ODU1 difference (without ATPC +/- 3dbm)",
            decimal: true,
            autoform: {
              type: "number"
            },
            autoValue: function() {
                var ODU1gemessen = this.field("SiteA.Settings.RXSignalODU1");
                var ODU1planned = this.field("SiteA.Settings.RXSignalODU1planned");
                if (ODU1gemessen.isSet || ODU1planned.isSet) {
                    return ODU1gemessen.value - ODU1planned.value;
                }
            },
            custom: function() {
                var ODU1gemessen = this.field("SiteA.Settings.RXSignalODU1");
                var ODU1planned = this.field("SiteA.Settings.RXSignalODU1planned");
                var dif = ODU1gemessen.value - ODU1planned.value;
                if (this.value !== dif) {
                    return "noUpdateAllowed";
                }
            }
        },

My Simple.Schema message:

SimpleSchema.messages({noUpdateAllowed: "Can't be updated"});

Unfortunatly no message pops up.

Upvotes: 1

Views: 811

Answers (1)

bluebird
bluebird

Reputation: 640

EDIT

This method will create a disabled input box within your form that will automatically show the difference between two other input fields as the user types.

First, we define session variables for the values used in the calculation and initialize them to undefined.

Template.xyz.onRendered({
  Session.set("ODU1gemessen", undefined);
  Session.set("ODU1planned", undefined);
});

Then we define two events, that will automatically update these session variables as the user types.

Template.xyz.events({
  'keyup #RXSignalODU1' : function (event) {
    var value = $(event.target).val();
    Session.set("ODU1gemessen", value);
  },
  'keyup #RXSignalODU1planned' : function (event) {
    var value = $(event.target).val();
    Session.set("ODU1planned", value);
  }

});

Then we define a helper to calculate the difference.

Template.xyz.helpers({
  RXSignalODU1difference : function () {
    var ODU1gemessen = Session.get("ODU1gemessen");
    var ODU1planned = Session.get("ODU1planned"); 

    if (!!ODU1gemessen || !!ODU1planned) {
      return ODU1gemessen - ODU1planned;
    }
  }
});

My HTML markup looks like this. Note, to still control the order of the form, I use a {{#autoform}} with a series of {{> afQuickfields }} rather than using {{> quickForm}}.

To display the calculated difference, I just create a custom div with a disabled text box. 

<template name="xyz">
  {{#autoForm collection="yourCollection" id="yourId" type="insert"}}
    <fieldset>
      <legend>Enter legend text</legend>
      {{> afQuickField name="SiteA.Settings.RXSignalODU1" id="RXSignalODU1"}}
      {{> afQuickField name="SiteA.Settings.RXSignalODU1planned" id="RXSignalODU1planned"}}
      <div class="form-group">
          <label class="control-label">RXSignalODU1difference</label>
          <input class="form-control" type="text" name="RXSignalODU1difference" disabled value="{{RXSignalODU1difference}}">
          <span class="help-block"></span>
        </div>
    </fieldset>
    <button class="btn btn-primary" type="submit">Insert</button>
  {{/autoForm}}
</template>

Original Answer - not recommended

If you are generating your form as a quickForm, you could do something like 

{{>quickForm collection='yourCollection' omitFields='SiteA.Settings.RXSignalODU1difference'}}

This will leave this field off the form, so the user won't be able to update it.

If you still want to display the value somewhere along with the form as the user types in the other two values, you could define a helper in your client side js

something like 

Template.yourFormPage.helpers({
    diff: function () {
        var ODU1gemessen = $('[name=SiteA.Settings.RXSignalODU1]').val();
        var ODU1planned = $('[name=SiteA.Settings.RXSignalODU1planned]').val();
        if (!!ODU1gemessen || !!ODU1planned) {
            return ODU1gemessen - ODU1planned;
        }
     }
});

You'll want to double check how the field names are being rendered in your DOM. Autoform assigns the name attribute using the field names in your schema, but I don't know how it handles nested keys... (i.e. whether it names the element 'SiteA.Settings.RXSignalODU1' or just 'RXSignalODU1' )

And then just display the value somewhere in your html as :

{{diff}}

Upvotes: 1

Related Questions