django-angular-dynamic-forms

This repo provides Django mixins and Angular library for rapid development of create/edit dialogs for django rest framework. It depends on Django 2, Angular 6 and Material UI.

Note: support for Angular 5 and Django<2 is not actively developed - use release/angular5 branch or 1.1.* versions of packages if you need that.

On django side, extend your Viewset to use AngularFormMixin and optionally configure the mixin by providing either layout information or field defaults (such as css classes). See demos for details.

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

On angular side, use DjangoFormDialogService to display a dialog:

constructor(private dialog: DjangoFormDialogService) {
}
createCity() {
    this.dialog.open('/api/1.0/cities/').subscribe(result => {
        console.log('City created, result from server is:', result);
    });
}

You can also display the form inside your own component via <django-inpage-form> tag.

<django-inpage-form django_url="/api/1.0/cities/"
                    (submit)="submit($event)"
                    (cancel)="cancel($event)"></django-inpage-form>

Demo and sample source files

See demos at http://mesemus.no-ip.org:12569

https://raw.githubusercontent.com/mesemus/django-angular-dynamic-forms/develop/docs/demo.png

With a bit of work on your side, foreign keys and many-to-many relationships are supported as well (see the demos for details)

https://raw.githubusercontent.com/mesemus/django-angular-dynamic-forms/develop/docs/foreign_key.png

Installation

Django side:

pip install django-angular-dynamic-forms

Angular side:

npm install --save django-angular-dynamic-forms @ng-dynamic-forms/core @ng-dynamic-forms/ui-material

To render forms, this library uses https://github.com/udos86/ng-dynamic-forms - do not forget to add it to your package.json.

and add DjangoFormModule to imports. You will need to provide your own ErrorService for showing communication errors back to the user. See the demo/angular/src/app/mat-error.service.ts for an example implementation.

import {DjangoFormModule, ErrorService} from 'django-angular-dynamic-forms';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        BrowserAnimationsModule,
        DynamicFormsCoreModule.forRoot(),
        DynamicFormsMaterialUIModule,
        DjangoFormModule,
        HttpClientModule,
        ...
    ],
    providers: [
        {
            provide: ErrorService,
            useClass: MatErrorService
        },
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Configuration

If your angular and django server are on the same host/port (see https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md for development tips), no configuration is necessary.

If angular and django are on different hosts/ports, set django setting ANGULAR_FORM_ABSOLUTE_URLS=True ( thanks @sssolid for pointing this out).

Metadata

Release files for django-angular-dynamic-forms 6.1.3

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-angular-dynamic-forms 6.1.3
File	Size	Uploaded
django-angular-dynamic-forms-6.1.3.tar.gz	13.9 kB	Sep 30, 2018	Details

Release files / django-angular-dynamic-forms-6.1.3.tar.gz

Download URL	django-angular-dynamic-forms-6.1.3.tar.gz
Size	13.9 kB
Tags	Source
SHA-256 checksum How to use checksums	`2843b953c3f8f804a6cf25f32be11fde8746abf82a90b52d74a0bf8ce7c012c7`
BLAKE2b-256 checksum How to use checksums	`7c52e80cb928e4c0e36f0353e2bdd39ebdb233535a7fbfbddfcfd8be8770166b`
Upload date	Sep 30, 2018
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`twine/1.11.0 pkginfo/1.4.2 requests/2.19.1 setuptools/38.2.4 requests-toolbelt/0.8.0 tqdm/4.23.4 CPython/3.6.3`