Use an external formGroup instead of a new form in the dateRange component

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

@@ -1,6 +1,6 @@
 <div class="col-md-6">
     <div *ngIf="reportDetails">
-        <form>
+        <form [formGroup]="reportForm" novalidate>
         <h1>{{reportDetails.name}}</h1>
         <div *ngFor="let field of reportDetails.definition.parameters">
             <div [ngSwitch]="field.type">
@@ -36,7 +36,7 @@
                 </div>
                 <div *ngSwitchCase="'dateRange'">
                     <br>
-                    <date-range-widget [field]="field"
+                    <date-range-widget [field]="field" [group]="reportForm.controls.dateRange"
                                        (dateRangeChanged)="onDateRangeChange($event)"></date-range-widget>
                 </div>
                 <div *ngSwitchCase="'dateInterval'">
@@ -53,6 +53,12 @@
             <button type="submit" class="mdl-button mdl-js-button mdl-button--fab" (click)="createReport()" >
                 <i class="material-icons">refresh</i>
             </button>
+        <div *ngIf="debug">
+            <p>ReportForm : {{ reportForm.value | json }}</p>
+            <p>ReportForm valid : {{ reportForm.valid }}</p>
+            <p>ReportForm status : {{ reportForm.errors | json }}</p>
+            <p>ReportForm FormGroup valid : {{ reportForm.controls.dateRange.valid | json }}</p>
+        </div>
         </form>
 
         <div *ngFor="let report of reports">

ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts

@@ -20,7 +20,8 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
 import { ReportModel, ReportQuery, ParameterValueModel, ReportParameterModel } from '../models/report.model';
 import { Chart } from '../models/chart.model';
-
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import * as moment from 'moment';
 
 @Component({
     moduleId: module.id,
@@ -48,8 +49,13 @@ export class AnalyticsComponent implements  OnInit, OnChanges {
 
     reports: any[];
 
+    reportForm: FormGroup;
+
+    debug: boolean = true;
+
     constructor(private translate: AlfrescoTranslationService,
-                private analyticsService: AnalyticsService) {
+                private analyticsService: AnalyticsService,
+                private formBuilder: FormBuilder ) {
         console.log('AnalyticsComponent');
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-activiti-analytics/src');
@@ -57,7 +63,13 @@ export class AnalyticsComponent implements  OnInit, OnChanges {
     }
 
     ngOnInit() {
-
+        let today = moment().format('YYYY-MM-DD');
+        this.reportForm = this.formBuilder.group({
+            dateRange: this.formBuilder.group({
+                startDate: [today, Validators.required],
+                endDate: [today, Validators.required]
+            })
+        });
     }
 
     ngOnChanges(changes: SimpleChanges) {

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html

@@ -1,48 +1,48 @@
 <label>{{field.nameKey | translate}}</label><br>
-<form [formGroup]="dataForm">
-    <fieldset formGroupName="dateRange">
-        <span *ngIf="dataForm.get('dateRange').errors && dataForm.get('dateRange').errors.greaterThan">Error: startDate is greater than
-            endDate</span>
-        <div class="mdl-grid">
-            <div class="mdl-cell mdl-cell--4-col">
-                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                    <input class="mdl-textfield__input"
-                           formControlName="startDate"
-                           type="text"
-                           (onOk)="onOkStart(startElement)"
-                           id="startDateInput" #startElement>
-                    <label class="mdl-textfield__label" for="startDateInput">Start Date</label>
-                </div>
-            </div>
-            <div class="mdl-cell mdl-cell--2-col">
-                <button id="startDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
-                    <i class="material-icons">date_range</i>
-                </button>
-            </div>
-            <div class="mdl-cell mdl-cell--4-col">
-                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                    <input class="mdl-textfield__input"
-                           formControlName="endDate"
-                           type="text"
-                           (onOk)="onOkEnd(endElement)"
-                           id="endDateInput" #endElement>
-                    <label class="mdl-textfield__label" for="endDateInput">End Date</label>
-                </div>
-            </div>
-            <div class="mdl-cell mdl-cell--2-col">
-                <button id="endDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
-                    <i class="material-icons">date_range</i>
-                </button>
+<div [formGroup]="dateRange">
+    <small *ngIf="dateRange.errors && dateRange.errors.greaterThan" [hidden]="!dateRange.errors" class="text-danger">
+        Start date must be less than End date
+    </small>
+    <div class="mdl-grid">
+        <div class="mdl-cell mdl-cell--4-col">
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                <input class="mdl-textfield__input"
+                       formControlName="startDate"
+                       type="text"
+                       (onOk)="onOkStart(startElement)"
+                       id="startDateInput" #startElement>
+                <label class="mdl-textfield__label" for="startDateInput">Start Date</label>
+                <small [hidden]="dateRange.controls.startDate.valid" class="text-danger">
+                    Start is required
+                </small>
             </div>
         </div>
-    </fieldset>
-</form>
+        <div class="mdl-cell mdl-cell--2-col">
+            <button id="startDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
+                <i class="material-icons">date_range</i>
+            </button>
+        </div>
+        <div class="mdl-cell mdl-cell--4-col">
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                <input class="mdl-textfield__input"
+                       formControlName="endDate"
+                       type="text"
+                       (onOk)="onOkEnd(endElement)"
+                       id="endDateInput" #endElement>
+                <label class="mdl-textfield__label" for="endDateInput">End Date</label>
+            </div>
+        </div>
+        <div class="mdl-cell mdl-cell--2-col">
+            <button id="endDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
+                <i class="material-icons">date_range</i>
+            </button>
+        </div>
+    </div>
+</div>
 <div *ngIf="debug">
-    <p>Form : {{ dataForm.value | json }}</p>
-
-    <p>FormGroup : {{ dataForm.get('dateRange').value | json }}</p>
-
-    <p>FormGroup valid : {{ dataForm.get('dateRange').valid }}</p>
-
-    <p>FormGroup status : {{ dataForm.get('dateRange').errors | json }}</p>
+    <p>FormGroup : {{ dateRange.value | json }}</p>
+    <p>FormGroup valid : {{ dateRange.valid }}</p>
+    <p>FormGroup status : {{ dateRange.errors | json }}</p>
+    <p>FormGroup start status : {{ dateRange.controls.startDate.errors | json }}</p>
+    <p>FormGroup end status: {{ dateRange.controls.endDate.errors | json }}</p>
 </div>

ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
-import { AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { AbstractControl, FormGroup, FormBuilder } from '@angular/forms';
 import { WidgetComponent } from './../widget.component';
 import * as moment from 'moment';
 
@@ -45,13 +45,16 @@ export class DateRangeWidget extends WidgetComponent {
     @ViewChild('endElement')
     endElement: any;
 
+    @Input('group')
+    public dateRange: FormGroup;
+
     @Input()
     field: any;
 
     @Output()
     dateRangeChanged: EventEmitter<any> = new EventEmitter<any>();
 
-    dataForm: FormGroup;
+    debug: boolean = true;
 
     dialogStart: any = new mdDateTimePicker.default({
         type: 'date',
@@ -63,8 +66,6 @@ export class DateRangeWidget extends WidgetComponent {
         future: moment().add(21, 'years')
     });
 
-    debug: boolean = false;
-
     constructor(public elementRef: ElementRef,
                 private formBuilder: FormBuilder) {
         super();
@@ -77,15 +78,8 @@ export class DateRangeWidget extends WidgetComponent {
     }
 
     initForm() {
-        let today = moment().format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
-        this.dataForm = this.formBuilder.group({
-            dateRange: this.formBuilder.group({
-                startDate: [today, Validators.required],
-                endDate: [today, Validators.required]
-            }, {validator: dateCheck})
-        });
-        this.dataForm.valueChanges.subscribe(data => this.onValueChanged(data));
-        this.dataForm.controls['dateRange'].valueChanges.subscribe(data => this.onGroupValueChanged(data));
+        this.dateRange.setValidators(dateCheck);
+        this.dateRange.valueChanges.subscribe(data => this.onGroupValueChanged(data));
     }
 
     initSartDateDialog() {
@@ -108,8 +102,7 @@ export class DateRangeWidget extends WidgetComponent {
 
     onOkStart(inputEl: HTMLInputElement) {
         let date = this.dialogStart.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
-        let dateRange: any = this.dataForm.controls['dateRange'];
-        dateRange.patchValue({
+        this.dateRange.patchValue({
             startDate: date
         });
         let materialElemen: any = inputEl.parentElement;
@@ -120,8 +113,7 @@ export class DateRangeWidget extends WidgetComponent {
 
     onOkEnd(inputEl: HTMLInputElement) {
         let date = this.dialogEnd.time.format(DateRangeWidget.FORMAT_DATE_ACTIVITI);
-        let dateRange: any = this.dataForm.controls['dateRange'];
-        dateRange.patchValue({
+        this.dateRange.patchValue({
             endDate: date
         });
 
@@ -132,19 +124,9 @@ export class DateRangeWidget extends WidgetComponent {
     }
 
     onGroupValueChanged(data: any) {
-        if (this.dataForm.controls['dateRange'].valid) {
-            let dateRange: any = this.dataForm.controls['dateRange'];
-            let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
-            // let endStart = this.convertMomentDate(this.dataForm.controls['endDate'].value);
-            console.log(dateStart);
-        }
-    }
-
-    onValueChanged(data: any) {
-        if (this.dataForm.valid) {
-            let dateRange: any = this.dataForm.controls['dateRange'];
-            let dateStart = this.convertMomentDate(dateRange.controls['startDate'].value);
-            let endStart = this.convertMomentDate(dateRange.controls['endDate'].value);
+        if (this.dateRange.valid) {
+            let dateStart = this.convertMomentDate(this.dateRange.controls['startDate'].value);
+            let endStart = this.convertMomentDate(this.dateRange.controls['endDate'].value);
             this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
         }
     }
@@ -152,5 +134,4 @@ export class DateRangeWidget extends WidgetComponent {
     public convertMomentDate(date: string) {
         return moment(date, DateRangeWidget.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidget.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
     }
-
 }