{% extends "base.html" %} {% load static sekizai_tags tutorial_tags %} {% block addtoblock %} {{ block.super }} {% addtoblock "js" %}{% endaddtoblock %} {% add_data "ng-requires" "djng.forms" %} {% addtoblock "ng-config" %}['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; $httpProvider.defaults.headers.common['X-CSRFToken'] = '{{ csrf_token }}'; }]{% endaddtoblock %} {% endblock %} {% block main-content %} {% block main-intro %}
New in 2.0 How to validate a Set of Forms
This example shows how to validate multiple Forms inside an AngularJS application.
{% endblock main-intro %}djng-forms-set
's scope:subscribe_data = {{ subscribe_data | json }} address_data = {{ address_data | json }}{% endverbatim %}
In component based web development, it is quite common to arrange more than one form on the same
page. As opposed to form submissions via application/x-www-form-urlencoded
or
multipart/form-data
, we can, thanks to Ajax, submit the content of more than one form
using a single HTTP-request. This requires to dispatch the submitted data on the server to each
form class, but if we prefix them with unique identifiers (using scope_prefix
), that's
a no-brainer.
djng-forms-set
To achieve this, we can reuse the same Form mixin classes as we have used in the previous examples.
The main difference is that we must wrap the set of forms into the AngularJS directive,
<djng-forms-set endpoint="/some/endpoint">...</djng-forms-set>
.
Inside this directive, we render the forms as usual, using
{{ form.as_div }}
.
The submit button(s) now can be placed outside of the <form>...</form>
element. This allows us to submit the content from multiple forms altogether. However, we
must specify the common endpoint to accept our form submissions; this is, as you might have
expected, the attribute endpoint="/some/endpoint"
ng-click="do(update())"
do(...)
, in order to emulate the first promise (see below for a longer
explanation).
By itself, this however would not invoke any further action on the client. We therefore must
tell our directive, what we want to do next. For this, the django-angular's button
directive offers a few prepared targets, which can be chained. If we change the above to
ng-click="do(update()).then(reloadPage())"
For further options on how to chain actions, please refer to the previous chapter.
All forms wrapped inside our djng-forms-set
ng-disabled="isDisabled()"