Skip to main content

Angular forms for django rest framework

Project description

# Django Rest Framework integration with Angular dynamic forms

The aim of this project is to enable easy creation of Angular2 UI
for django web applications. Django side provides REST api (via
django-rest-framework) and optionally layout information. Angular2
side provides implementation of dynamic form that automatically downloads
layout information and initial data from the REST api, renders form,
submits data to django server, displays validation errors and after
successful submission notifies the parent component. There are two
* "in-page" - the form is rendered directly in the parent container
* "dialog" - caller can use ``
to open create/edit in dialog and be notified when the dialog is

# Demo application
* clone the project
* create new virtualenv for django project:
virtualenv --python=python3 venv
source venv/bin/activate
* run django sample server
cd lib/sandbox-django/testserver
export DJANGO_SETTINGS_MODULE=testserver.settings
./ migrate
./ runserver 8000
* install dependencies
npm install
* run the demo
ng serve
* Point browser to `http://localhost:4200` and enjoy

# Usage

## Django side

In order to render the form, angular part of the library needs
to obtain additional metadata from django rest framework
- definition of fields and their layout. This functionality
is implemented in `AngularFormMixin` that adds a new path
`.../form/` returning the metadata. For example:

> curl http://localhost:8000/api/1.0/cities/form/

"method": "post",
"form_title": "Creating a new city",
"layout": [
"read_only": false,
"id": "name",
"max_length": 100,
"type": "string",
"label": "Name",
"required": true
"has_initial_data": false,
"actions": [
"id": "create",
"label": "Create"
"id": "cancel",
"cancel": true,
"label": "Cancel"


When defining ViewSet, use this mixin:

class CityViewSet(AngularFormMixin, viewsets.ModelViewSet):
API for cities
queryset = City.objects.all()
serializer_class = CitySerializer
permission_classes = (permissions.AllowAny,)

and use Router or register the path yourself:

router = DefaultRouter()
router.register(r'cities', CityViewSet)

urlpatterns = [
url(r'^', include(router.urls)),

## Angular side

### In-page

For the in-page use case, add `<inpage-django-form>` tag directly into
the template and bind the `django_url` to:
* collection URL to create a new object inside the collection (for example, `http://localhost:8000/api/1.0/cities/`)
* concrete object to edit the object (for example, `http://localhost:8000/api/1.0/cities/1/`)

Optionally bind `submit` and `cancel` events to get notification after
the form was submitted or cancelled.

See `app.component.html` for a working example.

### Dialog

The dialog version is even easier to use:

constructor(private dialog: DjangoFormDialogService) {}

private open() {'http://localhost:8000/api/1.0/cities/',
// ok
(data, response) => {
console.log('submit ok', data, response);
// cancel
data => {
console.log('submit cancelled', data);

# Documentation


Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-angular-dynamic-forms, version 0.5.10
Filename, size File type Python version Upload date Hashes
Filename, size django-angular-dynamic-forms-0.5.10.tar.gz (8.6 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page