Skip to main content

Angular forms for django rest framework

Project description

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

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 <inpage-django-form> tag.

<inpage-django-form django_url="/api/1.0/cities/"
                    (submit)="submit($event)"
                    (cancel)="cancel($event)"></inpage-django-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

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 {
}

Project details


Release history Release notifications

History Node

0.7.5

History Node

0.7.4

History Node

0.7.3

History Node

0.7.2

History Node

0.7.1

History Node

0.6.12

History Node

0.6.11

History Node

0.6.10

History Node

0.6.9

History Node

0.6.8

History Node

0.6.7

History Node

0.6.6

History Node

0.6.5

History Node

0.6.4

History Node

0.6.3

History Node

0.6.2

History Node

0.6.1

History Node

0.5.44

History Node

0.5.43

History Node

0.5.42

History Node

0.5.41

History Node

0.5.40

This version
History Node

0.5.39

History Node

0.5.38

History Node

0.5.37

History Node

0.5.36

History Node

0.5.33

History Node

0.5.32

History Node

0.5.31

History Node

0.5.30

History Node

0.5.29

History Node

0.5.28

History Node

0.5.27

History Node

0.5.26

History Node

0.5.25

History Node

0.5.24

History Node

0.5.23

History Node

0.5.22

History Node

0.5.21

History Node

0.5.20

History Node

0.5.19

History Node

0.5.18

History Node

0.5.17

History Node

0.5.16

History Node

0.5.15

History Node

0.5.14

History Node

0.5.13

History Node

0.5.12

History Node

0.5.11

History Node

0.5.10

History Node

0.5.9

History Node

0.5.8

History Node

0.5.7

History Node

0.5.6

History Node

0.5.5

History Node

0.5.4

History Node

0.5.3

History Node

0.5.1

Download files

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

Filename, size & hash SHA256 hash help File type Python version Upload date
django-angular-dynamic-forms-0.5.39.tar.gz (8.8 kB) Copy SHA256 hash SHA256 Source None Feb 13, 2018

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page