django-angular-dynamic-forms 0.5.1

Angular forms for django rest framework

# 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
implementations:
* "in-page" - the form is rendered directly in the parent container
* "dialog" - caller can use `DjangoFormDialogService.open(...)`
to open create/edit in dialog and be notified when the dialog is
closed.

# 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
./manage.py migrate
./manage.py 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() {
this.dialog.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

TBD