Complex Forms. Adding and removing subforms.

Webix JS
#1

Hi, I have a form where I can add and remove subforms inside a main form. I have something working based on discussion here (https://forum.webix.com/discussion/37269/complex-form-in-webix).

Please see what I have so far here https://snippet.webix.com/8b0y9s49.

I’m now trying to add some more features to it. Mainly validation, isDirty and auto calculation of fields based on other fields. In my snippet above I have a plus and trash button which can add and remove subforms for a book. There is a book name, price, quantity and cost field in each sub form. When I enter a number into price and quantity I want it to update the cost field. Furthermore the total quantity and total cost fields in the main form should also update based on the sum of all the cost and quantity fields in each sub forms.

There is also a get value button which runs validate() and getValues(). Unfortunately the validate doesn’t work with the subForms. Same with the isDirty state of the form.

Any help will be appreciated.

#2

@intregal Any ideas?

#3

Hi @AllanSham

The API of the form handles only elements that have at least a name property and get/setValue methods. By default, each form is a separate component that handles only its own values/controls.

The created Subform is a valid component for a parent form and acts as a “proxy” that connects parent and nested forms, however, handling values is only part of the case.
As a subform still has regular forms inside, it would require additional methods to provide correct results from validation/dirty values and perhaps some event handlers.

The isDirty and getDirtyValues iterate through each form control and compare the saved value to the current one.
Default comparison is a simple loose inequality operator (!=), however, controls may have a method for specific value comparison ($compareValue) that will be called instead with more complex statements.

Validation is also called on Subform, but the default logic of a form will interact only with “proper” form controls, which makes it necessary to extend Subform with a custom method to gather the results of the validation from nested forms.
Here’s an example of implementation for these two features: Code Snippet

  • $compareValue at lines 198-215
  • validate at lines 216-225

There’s also methods for adding a new “kid” and for mapping onChange events in the same way as it is done for regular inputs.

Additionally, I would suggest a few improvements in the structure to add/remove nested forms through the Subform methods:
https://snippet.webix.com/cvehd81x
In the above example,

  • the set of inputs (form elements) is stored as baseSubConfig in the configuration of the Subform,
  • the “kids” are configured and added with a related method (addNewForm at line 177)
  • icons with the add/remove logic are also added separately (getIcons at line 195)

auto calculation of fields based on other fields

This would be possible only with fully custom calculations made in onChange handlers.
For example, on Subform you can do something similar to this: Code Snippet

  • in the main form, onValues fires at the moment when mainForm.setValues was applied
  • in the subform, the inner changes are handled with onChange