how to set values based on another input field?

[katherdx]

How to set values based on anther input field. I have 3 input fields respectively totalAmount, advance, balance. Here user will provide totalAmount and Advance. Based on this input i want to calculate remaining balance. I don't know how to achieve this using angular2-json-schema-form.

I tried below form but working.

{
  "schema": {
    "TotalAmount": {
      "type": "number",
      "title": "TotalAmount"
    },
    "Advance": {
      "type": "number",
      "title": "Advance"
    },
    "Balance": {
      "type": "number",
      "title": "Balance"
    }
  },
  "form": [
    "TotalAmount",
    "Advance",
    {
      "key": "Balance",
      "value": "{{TotalAmount - Advance}}"
    }
  ] 
}

[katherdx]

@dschnelldavis

is any process regarding this bug ?

[nijeshhirpara]

I want to achieve something similar functionality. @dschnelldavis mentioned about 2-way data binding but it doesn't seem to be working.

My schema,

{
"eventCacheMemorySizeMB":` {
  "type": "string",
  "title": "The Eventcachememorysizemb Schema ",
  "default": "",
  "examples": [
    "4095"
  ]
 },
}

In my layout, I have created a widget called message where I want to write

{
                      'type': 'section',
                      'htmlClass': 'col-sm-6',
                      'items': [
                          {
                              'key': 'eventCacheMemorySizeMB',
                              'type': 'integer',
                              'title': Dictionary.XXX.TITLE,
                              'feedback': "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
                          },
                          {
                              'widget': 'message',
                              'message': 'This size stores approximately {eventCacheMemorySizeMB * 1024 *1024} events'
                          }
                      ]
}

So, the way it should work is, I should get realtime 'eventCacheMemorySizeMB' and calculate number of events it can accommodate. Not sure how to achieve this, really stuck.

---

I know, it will not work at the moment because 'eventCacheMemorySizeMB' is not a variable/constant in my layout, rather it is just a key of my schema. I just wrote it for Illustration purpose to visualise the end result.

I tried creating a constant in my layout and passing relatime data object to it, so that I could use,

  {
      'widget': 'message',
      'message': 'This size stores approximately '+realtimeData.eventCacheSize+' events'
  }

This get the value on initiating an object of the component. But it doesn't bind the value on change (2-way binding).

Secondly, I tried wrting onChange function and passed it to json-schema-form

HTML file,

<json-schema-form
        [schema]="realtimeSchema"
        [layout]="realtimeLayout"
        [data]="realtimeData"
        (onSubmit)="onSubmit($event)"
        (onChanges)="onChange($event)">
    </json-schema-form>

Inside component,

onChange(ev: any) {

    if ( Object.keys(ev).length ) {
        if ( !this.prevData ) {
            //initial copy. happens before any change in the form
            this.prevData=Object.assign({}, ev);
        } else {
            if ( JSON.stringify(this.prevData) !== JSON.stringify(ev) ) {
                this.prevData=Object.assign({}, ev);
                if (!ev.Active) {
                    //chnage class from 'btn-success' to 'btn-warning'
                    //let lbl = document.querySelector('#ng-reflect-ng-for-of');
                    //console.log('yo:' + lbl);
                } else {
                    //chnage class from 'btn-warning' to 'btn-success'
                }
            }
        }

        this.realtimeData = Object.assign(this.realtimeData, this.prevData);
        console.log("after",this.realtimeData.eventCacheMemorySizeMB);
    }
};

This will reinitialise the whole form onChnage with an updated object. However, user will loose focus on each change which is totally not an ideal scenario.