We've talked a lot about the Form Model lately, yet we still haven't seen it once. It would greatly help to have it on screen while developing the form templates, especially if it can be updated in real time as we play with the form inputs and controls.

Here's a convenient HTML snippet containing the Template Syntax required to let it happen:

<div class="panel panel-info"
     style="margin-top: 20px;">
    <div class="panel-heading">Form debug info</div>
    <div class="panel-body">
        <p><strong>Form value:</strong></p>
        <div class="help-block">
            {{ form.value | json }}
        </div>
        <p><strong>Form status:</strong></p>
        <div class="help-block">
            {{ form.status | json }}
        </div>
    </div>
</div>

We can put this snippet below any of our form-based components, for example, the QuestionEditComponent, to obtain the following result:

Pretty useful, right? If we play with the form a bit, we can see how the values contained in the Form debug info panel will change as we change the input controls; something like that will definitely come in handy when dealing with complex forms.