Django Rest Framework meets Angular 5 material.io dynamic forms - rapid development of create and edit dialogs
npm install django-angular-dynamic-formsDjango Rest Framework meets Angular 6 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.
`` {.sourceCode .python}`
class CityViewSet(AngularFormMixin, viewsets.ModelViewSet):
"""
API for cities
"""
queryset = City.objects.all()
serializer_class = CitySerializer
On angular side, use DjangoFormDialogService to display a dialog:
` {.sourceCode .typescript}`
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 tag.
` {.sourceCode .html}`
(cancel)="cancel($event)">
Demo and sample source files
----------------------------
See demos at
With a bit of work on your side, foreign keys and many-to-many
relationships are supported as well (see the demos for details)
Installation
------------
Django side:
` {.sourceCode .bash}`
pip install django-angular-dynamic-forms
Angular side:
` {.sourceCode .bash}`
npm install --save django-angular-dynamic-forms @ng-dynamic-forms/core @ng-dynamic-forms/ui-material
To render forms, this library uses
to your package.json.
and add DjangoFormModule to imports. You will need to provide your owndemo/angular/src/app/mat-error.service.ts
ErrorService for showing communication errors back to the user. See the for an example
implementation.
` {.sourceCode .typescript}
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 {
}
``