{% extends "model-scope.html" %} {% load tutorial_tags %} {% block form_title %}Validated Model-Form Demo{% endblock %} {% block form_header %}Combine client-side Form validation with two-way data-binding{% endblock %} {% block form_tag %}name="{{ form.form_name }}" method="post" action="." novalidate ng-controller="MyFormCtrl"{% endblock %} {% block form_submission %}

 

Test submission of invalid Form data:
 

{% endblock %} {% block tutorial_intro %}

In this example, client-side Form validation is combined with two-way data-binding.

If a Form inherits from both mixin classes NgModelFormMixin and NgFormValidationMixin, then django-angular combines client-side validation with AngularJS's model scope.

Refer to the previous examples for a detailed explanation.

{% endblock tutorial_intro %} {% block tutorial_code %} {% autoescape off %}
{% pygments "forms/combined_validation.py" %}
{% pygments "views/combined_validation.py" %}
{% pygments "tutorial/combined-validation.html" %}
{% pygments "static/js/model-scope.js" %}
{% endautoescape %}

This configuration is the most flexible one. Use it on productive web-sites.
Note: The submit buttons are disabled, until the client-side Form validation has validated all the fields.

{% endblock tutorial_code %}