version 6.1.2: Added ANGULAR_FORM_ABSOLUTE_URLS django settings for cases where django server and angular are on different hosts/ports (CORS), added valueChanged emitter to in-page dialogs

Author: Mirek Simek

angular_dynamic_forms/rest.py

@@ -4,6 +4,7 @@
 import os
 import re
 
+from django.conf import settings
 from django.core.exceptions import FieldDoesNotExist
 from django.db.models import TextField
 from django.http import Http404
@@ -323,7 +324,11 @@ def _get_form_metadata(self, has_instance, form_name='', base_path=None):
 
         ret['method'] = 'patch' if has_instance else 'post'
         ret['hasInitialData'] = has_instance
-        ret['djangoUrl'] = base_path + self._get_url_by_form_id(form_name)
+
+        if getattr(settings, 'ANGULAR_FORM_ABSOLUTE_URLS', False):
+            ret['djangoUrl'] = self.request.build_absolute_uri(base_path + self._get_url_by_form_id(form_name))
+        else:
+            ret['djangoUrl'] = base_path + self._get_url_by_form_id(form_name)
 
         # print(json.dumps(ret, indent=4))
         return ret

demo/django/setup.py

@@ -25,7 +25,7 @@
     # Versions should comply with PEP440.  For a discussion on single-sourcing
     # the version across setup.py and the project code, see
     # https://packaging.python.org/en/latest/single_source_version.html
-    version='6.1.1',
+    version='6.1.2',
 
     description='Angular forms for django rest framework',
     long_description=long_description,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "angular-demo",
-    "version": "6.1.1",
+    "version": "6.1.2",
     "scripts": {
         "ng": "ng",
         "start": "ng serve --proxy-config proxy.conf.json",

projects/django-angular-dynamic-forms/package.json

@@ -1,6 +1,6 @@
 {
     "name": "django-angular-dynamic-forms",
-    "version": "6.1.1",
+    "version": "6.1.2",
     "license": "MIT",
     "description": "Django Rest Framework meets Angular 5 material.io dynamic forms - rapid development of create and edit dialogs",
     "keywords": [],

projects/django-angular-dynamic-forms/src/impl/dialog-django-form.component.html

@@ -4,7 +4,8 @@
         <h1 mat-dialog-title *ngIf="config.formTitle">{{ config.formTitle }}</h1>
         <div mat-dialog-content>
             <django-form-content [layout]="config.layout" [initialData]="config.initialData" [errors]="errors$|async"
-                                 (submit)="submitted(undefined, undefined)" #form>
+                                 (submit)="submitted(undefined, undefined)"
+                                 #form>
             </django-form-content>
         </div>
 

projects/django-angular-dynamic-forms/src/impl/django-form-base.component.ts

@@ -42,6 +42,9 @@ export class DjangoFormBaseComponent implements OnInit {
     @Input()
     public extraConfig: any = {};
 
+    @Output()
+    valueChanged = new EventEmitter<any>();
+
     @ViewChild('form')
     protected form: DjangoFormContentComponent;
 

projects/django-angular-dynamic-forms/src/impl/django-form-content.component.ts

@@ -69,6 +69,7 @@ import {
 } from '../foreign';
 import {MatDialog} from '@angular/material';
 import {catchError} from 'rxjs/operators';
+import {Subscription} from 'rxjs';
 
 
 class AutoCompleter {
@@ -138,6 +139,10 @@ export class DjangoFormContentComponent implements OnInit, OnDestroy {
     private foreigns: any[] = [];
     private foreignDefinitions: { [s: string]: any; } = {};
 
+    @Output()
+    valueChanged = new EventEmitter<any>();
+    valueChangedSubscription: Subscription;
+
     @Input()
     public set layout(_layout: FieldConfig[]) {
         if (_layout) {
@@ -215,6 +220,9 @@ export class DjangoFormContentComponent implements OnInit, OnDestroy {
 
     public ngOnDestroy() {
         this._unbindForeignKey();
+        if (this.valueChangedSubscription) {
+            this.valueChangedSubscription.unsubscribe();
+        }
     }
 
     public get valid() {
@@ -240,6 +248,25 @@ export class DjangoFormContentComponent implements OnInit, OnDestroy {
         this._bindAutocomplete();
         this._bindForeignKey();
         this._updateInitialData();
+        if (this.valueChangedSubscription) {
+            this.valueChangedSubscription.unsubscribe();
+        }
+        this.valueChangedSubscription = this.formGroup.valueChanges.subscribe(value => {
+            function _flatten(o) {
+                if (o === undefined || o === null) {
+                    return [];
+                }
+                return [].concat(...Object.keys(o)
+                    .map(k =>
+                        typeof o[k] === 'object' ?
+                            _flatten(o[k]) :
+                            ({[k]: o[k]})
+                    )
+                );
+            }
+            value = Object.assign({}, ..._flatten(value));
+            this.valueChanged.emit(value);
+        });
     }
 
     private _bindAutocomplete() {

projects/django-angular-dynamic-forms/src/impl/inpage-django-form.component.html

@@ -2,7 +2,9 @@
     <ng-container *ngIf="config$|async; let config">
 
         <django-form-content [layout]="config.layout" [initialData]="config.initialData" [errors]="errors$|async"
-                             (submit)="submitted(undefined, undefined)" #form>
+                             (submit)="submitted(undefined, undefined)"
+                             (valueChanged)="onModified($event)"
+                             #form>
         </django-form-content>
 
         <div *ngIf="config.actions" fxLayout="row" class="dadf-buttons">

projects/django-angular-dynamic-forms/src/impl/inpage-django-form.component.ts

@@ -23,4 +23,8 @@ export class InPageDjangoFormComponent extends DjangoFormBaseComponent {
             this.shown.emit({form: this, config: config});
         }
     }
+
+    onModified(data: any) {
+        this.valueChanged.emit(data);
+    }
 }

setup.py

@@ -25,7 +25,7 @@
     # Versions should comply with PEP440.  For a discussion on single-sourcing
     # the version across setup.py and the project code, see
     # https://packaging.python.org/en/latest/single_source_version.html
-    version='6.1.1',
+    version='6.1.2',
 
     description='Django Rest Framework meets Angular 5 material.io dynamic forms - rapid development of create and edit dialogs',
     long_description=long_description,