Build dynamic forms using JET! — Part 4/5

Checkout part 1 ,part 2 and part 3 if you haven’t . In this post i will cover form value capturing, how we update when new values are entered and validate them.

Photo by Markus Spiske on Unsplash

For each field in the form, we allocate a new observable variable like below. Notice how html also points to the value attribute of the field using _value[$current.data.attribute] expression.

JS
for (var i = 0,i < fieldArr.length; i++) {
      self._value[fieldArr[i]] = ko.observable(val[fieldArr[i]])
      ...
}
html
<oj-input-text  value="{{_value[$current.data.attribute]}}" :id="[[$current.data.id]]" ></oj-input-text>

Like i mentioned in part 1, the validation is taken care by oj-validation-group, the valid state of this component is reflected in the valid state of our dynamic form.

<oj-validation-group :id="[[_validationGroupId]]" on-valid-changed="[[setValid]]">
  <oj-form-layout :id="[[_formId]]">
    <oj-bind-for-each data="{{_metadataArr}}">
      <template>
      <oj-bind-if test="[[getType($current.data) == 'string']]">
        <oj-input-text  value="{{_value[$current.data.attribute]}}" :id="[[$current.data.id]]" ></oj-input-text>
      </oj-bind-if>
      <oj-bind-if test="[[getType($current.data) == 'number']]">
        <oj-input-number value="{{_value[$current.data.attribute]}}" :id="[[$current.data.id]]"></oj-input-number>
      </oj-bind-if>
     
      ...
      
    </template>
    </oj-bind-for-each>
  </oj-form-layout>
</oj-validation-group>

In part 5 we will see how this idea can be transformed into a re-usable component .