Default calculated value on Add form

[korchev]

Posted this in the wrong thread

Decided to describe the process.

1. Create a page property which will contain the form state (current field values). This is needed to perform the calculations easily.
   

   

2. Set the Data and UpdateDataOnChange properties of the Form component. We want the page property to be up-to-date with the current form value.
   

   

3. Handle the Change event of the form and update the calculated field accordingly. We need Execute JavaScript code actions that will set the calculated form field value.

   • First handle the case when the user updates the Price -
     Code: this.form0.form.patchValue({ Total: ${formData.QTY} * ${event.value} })
     Condition: ${event.property} == 'Price'
     
     `)
   • Then handle the case when the user updates the Quantity
     Code: this.form0.form.patchValue({ Total: ${formData.Price} * ${event.value} })
     Condition: ${event.property} == 'QTY'
     

The third step uses the current form field value via ${formData.QTY} and ${formData.Price} (remember that we created a page property called formData and set the Form's Data property to it).

I am also attaching a sample application: calculated-form-fields.zip.