{% extends "base.html" %} {% load tutorial_tags %} {% block container %}

{% block form_title %}Django's Form Submission{% endblock %}

{% block form_header %}Classic Form Submission in an AngularJS context{% endblock %}

{% csrf_token %}
{{ form.as_div }}
{% block form_submission %} {% endblock %}
{% block form_foot %}{% endblock %}

How does it work?

{% block tutorial_intro %}

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

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 %} {% block tutorial_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 %}
{% endblock container %} {% block scripts %} {% endblock %} {% block ng_module_dependencies %}['ng.django.forms']{% endblock %}