Proper "flex-cell" layout configuration when using forms via "withFor…

…m()"

CHANGELOG.md

@@ -5,11 +5,17 @@ All notable changes to this project will be documented in this file.
 
 - ...
 
+## [0.1.6] - 2019-06-23
+
+### Added
+
+- Proper `flex-cell` layout configuration when using forms via `withForm()`. It supports an optional `layout` property with options to configure `flexCell`, `gutter`, `growItems`, `debug`.
+
 ## [0.1.5] - 2019-06-23
 
 ### Changed
 
-- `withForm()` renders fields within form tag with these attributes `flex-cell gutter default-cell-12` to support `layout` properties of form field definitions.
+- `withForm()` renders fields within form tag with these attributes `flex-cell gutter default-cell-12` to support `layout` properties of form field definitions (quick hack, not ideal).
 
 ## [0.1.4] - 2019-06-21
 

projects/demo/src/app/app.component.ts

@@ -72,8 +72,19 @@ export class AppComponent {
   doFormSimple () {
     this.dialogService.withForm(
       'Form (Simple)',
-      [ { title: 'Name', required: true } ],
-      { content: 'Tell me <b>something</b> about yourself...' }
+      [
+        { title: 'Name', required: true },
+        { title: 'Email', required: true },
+        { title: 'Address', type: 'textarea', required: true, layout: { cell: 8 } }
+      ],
+      {
+        content: 'Tell me <b>something</b> about yourself...',
+        layout: {
+          flexCell: true,
+          gutter: true,
+          growItems: true
+        }
+      }
     ).pipe(
       filter(result => result),
       concatMap(result => this.dialogService.withAlert(

projects/demo/src/app/sourceCodeReference.ts

@@ -65,18 +65,29 @@ export const sourceCodeReference = {
     '  }\n' +
     ']\n',
 
-  formSimple: 'this.dialogService.withForm(\n' +
-    '  \'Form (Simple)\',\n' +
-    '  [ { title: \'Name\', required: true } ],\n' +
-    '  { content: \'Tell me <b>something</b> about yourself...\' }\n' +
-    ').pipe(\n' +
-    '  filter(result => result),\n' +
-    '  concatMap(result => this.dialogService.withAlert(\n' +
-    '    \'Hello!\',\n' +
-    '    {\n' +
-    '      content: JSON.stringify(result, null, 2)\n' +
-    '    }))\n' +
-    ').subscribe()\n',
+  formSimple: `this.dialogService.withForm(
+      'Form (Simple)',
+      [
+        { title: 'Name', required: true },
+        { title: 'Email', required: true },
+        { title: 'Address', type: 'textarea', required: true, layout: { cell: 8 } }
+      ],
+      {
+        content: 'Tell me <b>something</b> about yourself...',
+        layout: {
+          flexCell: true,
+          gutter: true,
+          growItems: true
+        }
+      }
+    ).pipe(
+      filter(result => result),
+      concatMap(result => this.dialogService.withAlert(
+        'Hello!',
+        {
+          content: JSON.stringify(result, null, 2)
+        }))
+    ).subscribe()`,
 
   formMixed: 'this.dialogService.withForm(\'Form (Mixed with validators)\', this.fields).pipe(\n' +
     '  filter(result => result),\n' +

projects/dialog-service/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dialog-service",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Reactive Angular modal dialogs. Create alert, confirmation, progress and form based dialogs without writing component templates.",
   "repository": {
     "type": "git",

projects/dialog-service/src/lib/DialogService.ts

@@ -85,7 +85,8 @@ export abstract class DialogService {
    * @param fields
    * @param options Dialog options. 'content' represents content to be display in dialog;
    * 'submitButton' represents label to submit form (defaults to 'Submit'); 'cancelButton'
-   * represents label to cancel form (defaults to 'Cancel')
+   * represents label to cancel form (defaults to 'Cancel'); 'layout' defines the form's "flex-cell"
+   * layout attributes;
    * @returns Observable with form value object on submission, or false if form was cancelled
    */
   abstract withForm (
@@ -95,5 +96,11 @@ export abstract class DialogService {
       content?: string
       submitButton?: string
       cancelButton?: string
+      layout?: {
+        flexCell?: boolean | 6 | 12
+        gutter?: boolean
+        growItems?: boolean
+        debug?: boolean
+      }
     }): Observable<any>
 }

projects/dialog-service/src/lib/MatDialogService.ts

@@ -76,6 +76,12 @@ export class MatDialogService extends DialogService {
     submitButton?: string
     cancelButton?: string
     cancelMessage?: string
+    layout?: {
+      flexCell?: boolean | 6 | 12
+      gutter?: boolean
+      growItems?: boolean
+      debug?: boolean
+    }
   }): Observable<any> {
     options = options || {}
     options.submitButton = options.submitButton || 'Submit'

projects/dialog-service/src/lib/mat/Form.component.html

@@ -1,10 +1,19 @@
 <h1 mat-dialog-title>{{data.title}}</h1>
 <div mat-dialog-content>
     <div *ngIf="data.content" [innerHtml]="data.content" class="content"></div>
-    <form [formGroup]="form" flex-cell gutter default-cell-12 autocomplete="off">
-        <quick-form-field [field]="field" [form]="form"
-                          *ngFor="let field of formFields"></quick-form-field>
-    </form>
+    <div>
+        <form [formGroup]="form"
+              [attr.flex-cell]="attrFlexCell"
+              [attr.gutter]="attrGutter"
+              [attr.grow-items]="attrGrowItems"
+              [attr.default-cell-6]="attrDefaultCell6"
+              [attr.default-cell-12]="attrDefaultCell12"
+              [attr.debug]="attrDebug"
+              autocomplete="off">
+            <quick-form-field [field]="field" [form]="form"
+                              *ngFor="let field of formFields"></quick-form-field>
+        </form>
+    </div>
 </div>
 <div mat-dialog-actions>
     <button mat-button color="primary" type="button"

projects/dialog-service/src/lib/mat/Form.component.ts

@@ -18,12 +18,54 @@ export class FormComponent extends BaseFormComponent {
     @Inject(MAT_DIALOG_DATA) public data: {
       title: string
       fields: QuickFormField[]
+      content?: string
       submitButton: string
       cancelButton: string
       cancelMessage: string
-      content?: string
+      layout?: {
+        flexCell?: boolean | 6 | 12
+        gutter?: boolean
+        growItems?: boolean
+        debug?: boolean
+      }
     }
   ) {
     super(cd, dialogService, dialogRef, data.cancelMessage, data.fields)
   }
+
+  get attrFlexCell () {
+    const flexCell = this.data.layout && this.data.layout.flexCell
+    // must return null for Angular to remove the attribute
+    return flexCell ? true : null
+  }
+
+  get attrGutter () {
+    const gutter = this.data.layout && this.data.layout.gutter
+    // must return null for Angular to remove the attribute
+    return gutter ? true : null
+  }
+
+  get attrGrowItems () {
+    const growItems = this.data.layout && this.data.layout.growItems
+    // must return null for Angular to remove the attribute
+    return growItems ? true : null
+  }
+
+  get attrDefaultCell6 () {
+    const flexCell = this.data.layout && this.data.layout.flexCell
+    // must return null for Angular to remove the attribute
+    return flexCell === 6 ? true : null
+  }
+
+  get attrDefaultCell12 () {
+    const flexCell = this.data.layout && this.data.layout.flexCell
+    // must return null for Angular to remove the attribute
+    return flexCell === 12 ? true : null
+  }
+
+  get attrDebug () {
+    const debug = this.data.layout && this.data.layout.debug
+    // must return null for Angular to remove the attribute
+    return debug ? true : null
+  }
 }