Running the demos¶
Shipped with this project, there are four demo pages, showing how to use the AngularJS validation and data-binding mechanisms in combination with Django forms. Use them as a starting point for your own application using django-angular.
To run the demos, change into the directory
examples and start the development server:
pip install -r requirements.txt ./manage.py runserver
You can also run unit tests:
or, even better
Now, point a browser onto one of
Classic Subscribe Form with no data validation.
The Form Validation demo shows how to implement a Django form with enriched functionality to
add AngularJS’s form validation in a DRY manner. This demo combines the classes
NgFormValidationMixin with Django’s
forms.Form . This demo works without an AngularJS
The Model Form demo shows how to combine a Django form with
then can be used inside an AngularJS controller for all kind of purposes. Using an XMLHttpRequest,
this object can also be sent back to the server and bound to the same form is was created from.
Model Form Validation¶
The Model Form Validation shows how to combined both techniques from above, to create an AngularJS model which additionally is validated on the client.
Three-Way Data-Binding shows how to combine a Django form with
NgFormValidationMixin, so that
the form is synchronized by the server on all browsers accessing the same URL.
This demo is only available, if the external dependency Websocket for Redis has been installed.
Artificial form constraints¶
These demos are all based on the same form containing seven different input fields: CharField, RegexField (twice), EmailField, DateField, IntegerField and FloadField. Each of those fields has a different constraint:
- First name requires at least 3 characters.
- Last name must start with a capital letter.
- E-Mail must be a valid address.
- Phone number can start with
+and may contain only digits, spaces and dashes.
- Birth date must be a vaild date.
- Weight must be an integer between 42 and 95.
- Height must be a float value between 1.48 and 1.95.
Additionally there are two artificial constraints defined by the server side validation, which for obvious reasons require a HTTP round trip in order to fail. These are:
- The full name may not be “John Doe”
- The email address may not end in “@example.com”, “@example.net” or similar.