{% extends "base.html" %} {% load static sekizai_tags tutorial_tags %} {% block addtoblock %} {{ block.super }} {% addtoblock "js" %}{% endaddtoblock %} {% add_data "ng-requires" "djng.forms" %} {% endblock %} {% block main-content %} {% block main-intro %}

Django's Form Submission

Classic Form Submission in an AngularJS context

This example shows how to use a classic Django Form inside an AngularJS application.

{% endblock main-intro %}
{% csrf_token %}
{{ form.as_div }}
{% block form_submission %} {% endblock %}
{% block form_foot %}{% endblock %}

How does it work?

{% block main-tutorial %}

By inheriting from the mixin class Bootstrap3FormMixin, Django renders the form in a way, compatible with Twitter Bootstrap. Here the correct CSS classes are added to the <input> elements, which are embedded inside <div class="form-group"> containers. If you omit Bootstrap3FormMixin, then the Form is rendered, as Django would by default.

When this form is rejected by the server, the list of errors is rendered using AngularJS's built in Form Controller using the directive ng-show="formname.fieldname.$pristine". This in contrast to Django's internal behavior has the advantage, that the field's error message disappears as soon as the user starts typing.

Passwords can, for obvious reasons only be validated by the server. Here for demonstration purpose, this is performed by the password field itself, but don't do this in a productive environment!

{% endblock main-tutorial %} {% block main-sample-code %} {% autoescape off %}
{% pygments "forms/subscribe_form.py" %}
{% pygments "views/classic_subscribe.py" %}
{% pygments "tutorial/subscribe-form.html" %}
{% endautoescape %}

Use this setting, if you want your forms behave the way intended by Django. Here the only exception is, that errors from a previous and failed form validation disappear, as soon as the user changes that field.
In this setting, AngularJS adds a dummy ng-model attribute to each input field.

{% endblock main-sample-code %}
{% endblock main-content %}