docs: Added disabled state in reactive forms

docs/app/documentation/component-docs/calendar/calendar-docs.component.html

@@ -69,17 +69,9 @@ <h2>Internationalization</h2>
 <code-example [exampleFiles]="calendari18n"></code-example>
 
 <separator></separator>
-<h2>Single Mode Calendar in Form</h2>
+<h2>Calendar in Reactive Form</h2>
 <description>The Calendar component may also be used within Angular Reactive Forms.</description>
 <component-example [name]="'ex6'">
-    <fd-calendar-form-single-example></fd-calendar-form-single-example>
+    <fd-calendar-form-example></fd-calendar-form-example>
 </component-example>
-<code-example [exampleFiles]="calendarSingleFormSource"></code-example>
-
-<separator></separator>
-<h2>Range Mode Calendar in Form</h2>
-<description>The Calendar component may also be used within Angular Reactive Forms.</description>
-<component-example [name]="'ex7'">
-    <fd-calendar-form-range-example></fd-calendar-form-range-example>
-</component-example>
-<code-example [exampleFiles]="calendarRangeFormSource"></code-example>
+<code-example [exampleFiles]="calendarFormSource"></code-example>

docs/app/documentation/component-docs/calendar/calendar-docs.component.ts

@@ -4,8 +4,8 @@ import * as calendarRangeSrc from '!raw-loader!./examples/calendar-range-example
 import * as calendarSingleSrc from '!raw-loader!./examples/calendar-single-example.component.ts';
 import * as calendarMondayStartSrc from '!raw-loader!./examples/calendar-monday-start-example.component.ts';
 import * as calendarIntlSrc from '!raw-loader!./examples/calendar-i18n-example.component.ts';
-import * as calendarSingleFormSource from '!raw-loader!./examples/calendar-form-single-example.component.ts';
-import * as calendarRangeFormSource from '!raw-loader!./examples/calendar-form-range-example.component.ts';
+import * as calendarFormSourceT from '!raw-loader!./examples/calendar-form-examples.component.ts';
+import * as calendarFormSourceH from '!raw-loader!./examples/calendar-form-examples.component.html';
 import * as calendarProgrammaticallySource from '!raw-loader!./examples/calendar-programmatically-change-example.component.ts';
 import { ExampleFile } from '../../core-helpers/code-example/example-file';
 
@@ -89,15 +89,15 @@ myDisableFunction = function(d: FdDate): boolean {
         code: calendarIntlSrc
     }];
 
-    calendarSingleFormSource: ExampleFile[] = [{
-        language: 'typescript',
-        code: calendarSingleFormSource
-    }];
-
-    calendarRangeFormSource: ExampleFile[] = [{
-        language: 'typescript',
-        code: calendarRangeFormSource
-    }];
+    calendarFormSource: ExampleFile[] = [
+        {
+            language: 'typescript',
+            code: calendarFormSourceT
+        }, {
+            language: 'html',
+            code: calendarFormSourceH
+        }
+    ];
 
     calendarProgrammaticallySource: ExampleFile[] = [{
         language: 'typescript',

docs/app/documentation/component-docs/calendar/examples/calendar-form-examples.component.html

@@ -0,0 +1,27 @@
+<form [formGroup]="customForm" class="flex-form">
+    <div fd-form-item>
+        <fd-calendar 
+            [calType]="'single'" 
+            formControlName="date" 
+            [startingDayOfWeek]="1">
+        </fd-calendar>
+        Touched: {{customForm.controls.date.touched}}<br/>
+        Dirty: {{customForm.controls.date.dirty}}<br/>
+        Valid: {{customForm.controls.date.valid}}<br/>
+        Selected Date: {{ customForm.controls.date.value.toDateString() ? customForm.controls.date.value.toDateString() : 'null' }} <br />
+        <button fd-button (click)="setInvalid()">Set Invalid Single Date</button>
+    </div>
+    <div fd-form-item>
+        <fd-calendar 
+            [calType]="'range'" 
+            formControlName="dateRange" 
+            [startingDayOfWeek]="1">
+        </fd-calendar>
+        Touched: {{customForm.controls.dateRange.touched}}<br/>
+        Dirty: {{customForm.controls.dateRange.dirty}}<br/>
+        Selected Start Date: {{ customForm.controls.dateRange.value.start ? customForm.controls.dateRange.value.start.toDateString() : 'null' }} <br/>
+        Selected End Date: {{ customForm.controls.dateRange.value.end ? customForm.controls.dateRange.value.end.toDateString() : 'null' }} <br/>
+        Valid: {{ customForm.controls.dateRange.valid }} <br/>
+        <button fd-button (click)="setInvalidRange()">Set Invalid Range Date</button>
+    </div>
+</form>

docs/app/documentation/component-docs/calendar/examples/calendar-form-examples.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { FdDate } from '../../../../../../library/src/lib/calendar/models/fd-date';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'fd-calendar-form-example',
+    templateUrl: 'calendar-form-examples.component.html',
+    styles: [`
+            button {
+                margin-top: 1rem;
+            }
+
+            .flex-form{
+                display:flex;
+                justify-content:space-between;
+            }
+    `]
+})
+export class CalendarFormExamplesComponent {
+    customForm = new FormGroup({
+        date: new FormControl(FdDate.getToday()),
+        dateRange: new FormControl({
+            value: {
+                start: new FdDate(2019, 10, 11),
+                end: new FdDate(2019, 10, 19)
+            }, disabled: false
+        })
+    });
+
+    setInvalid() {
+        this.customForm.controls['date'].setValue(new FdDate(null, null, null));
+    }
+
+    setInvalidRange() {
+        this.customForm.controls['dateRange'].setValue(new FdDate(null, null, null));
+    }
+
+}

docs/app/documentation/component-docs/combobox/combobox-docs.component.html

@@ -64,9 +64,9 @@ <h2>Custom Item Template</h2>
 <code-example [exampleFiles]="comboboxTemplateExample"></code-example>
 
 <separator></separator>
-<h2>Disabled Combobox In A Reactive Form</h2>
+<h2>Combobox In A Reactive Form</h2>
 <description>
-    This example shows how to put <code>combobox</code> in a Reactive Form and sets it state to <code>disabled</code>
+    This examples shows how to put <code>combobox</code> in a Reactive Form. Also how to sets it's state to <code>disabled</code>
 </description>
 <component-example [name]="'ex7'">
     <fd-combobox-disabled-example></fd-combobox-disabled-example>

docs/app/documentation/component-docs/combobox/examples/combobox-disabled-example.component.html

@@ -1,13 +1,25 @@
 <form [formGroup]="customForm">
-    <div fd-form-set>
+    <div fd-form-set class="flex-form">
         <div fd-form-item>
-            <label fd-form-label for="form-combo-1">Selected Value:</label>
+            <label fd-form-label for="form-combo-1">Select Fruit:</label>
             <fd-combobox
                 formControlName="comboControl"
+                [dropdownValues]="dropdownValues"
                 fd-form-control
-                id="form-control-1"></fd-combobox>
+                id="form-combo-1"></fd-combobox>
+            Disabled: {{ customForm.controls.comboControl.disabled }}<br/>
+            Selected Value: {{ customForm.controls.comboControl.value }}
+        </div>
+        <div fd-form-item>
+            <label fd-form-label for="form-combo-2">Select Fruit:</label>
+            <fd-combobox
+                formControlName="disabledComboControl"
+                fd-form-control
+                id="form-combo-2"></fd-combobox>
+            Disabled: {{ customForm.controls.disabledComboControl.disabled }}<br/>
+            Selected Value: {{ customForm.controls.disabledComboControl.value }}
         </div>
     </div>
 </form>
 
-Disabled: {{ customForm.controls.comboControl.disabled }}
+

docs/app/documentation/component-docs/combobox/examples/combobox-disabled-example.component.ts

@@ -3,12 +3,27 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
     selector: 'fd-combobox-disabled-example',
+    styles: [`
+        .flex-form{
+            display:flex;
+            justify-content: space-between
+        }
+    `],
     templateUrl: './combobox-disabled-example.component.html'
 })
 export class ComboboxDisabledExampleComponent {
 
+    dropdownValues = [
+        'Apple',
+        'Pineapple',
+        'Banana',
+        'Kiwi',
+        'Strawberry'
+    ];
+
     customForm = new FormGroup({
-        comboControl: new FormControl({ value: 'Nancy', disabled: true }, Validators.required)
+        comboControl: new FormControl('Banana', Validators.required),
+        disabledComboControl: new FormControl({ value: 'Kiwi', disabled: true }, Validators.required)
     });
 
 }

docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html

@@ -53,15 +53,15 @@ <h2>Null Validity</h2>
 <code-example [exampleFiles]="datePickerAllowNull"></code-example>
 
 <separator></separator>
-<h2>Date Picker in Form</h2>
+<h2>Date Picker in Reactive Form</h2>
 <description>The date-picker component may also be used within Angular Reactive Forms.</description>
 <component-example [name]="'ex6'">
   <fd-date-picker-form-example></fd-date-picker-form-example>
 </component-example>
 <code-example [exampleFiles]="datePickerForm"></code-example>
 
 <separator></separator>
-<h2>Date Picker in Form with a Range of Dates</h2>
+<h2>Date Picker in Reactive Form with a Range of Dates</h2>
 <component-example [name]="'ex7'">
   <fd-date-picker-form-range-example></fd-date-picker-form-range-example>
 </component-example>

docs/app/documentation/component-docs/date-picker/examples/date-picker-form-example.component.ts

@@ -4,20 +4,35 @@ import { FdDate } from '../../../../../../library/src/lib/calendar/models/fd-dat
 
 @Component({
     selector: 'fd-date-picker-form-example',
+    styles: [`
+        .flex-form{
+            display:flex;
+            justify-content: space-between;
+        }
+    `],
     template: `
-        <form [formGroup]="customForm">
-            <fd-date-picker formControlName="date"></fd-date-picker>
+        <form [formGroup]="customForm" class="flex-form">
+            <div>
+                <fd-date-picker formControlName="date"></fd-date-picker><br/>
+                Touched: {{customForm.controls.date.touched}}<br/>
+                Dirty: {{customForm.controls.date.dirty}}<br/>
+                Valid: {{customForm.controls.date.valid}}<br/>
+                Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
+            </div>
+            <div>
+                <fd-date-picker formControlName="disabledDate"></fd-date-picker><br/>
+                Touched: {{customForm.controls.disabledDate.touched}}<br/>
+                Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
+                Valid: {{customForm.controls.disabledDate.valid}}<br/>
+                Disabled: {{customForm.controls.disabledDate.disabled}} <br/>
+                Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.date.value.toDateString() : 'null' }}
+            </div>
         </form>
-
-        Touched: {{customForm.controls.date.touched}}<br/>
-        Dirty: {{customForm.controls.date.dirty}}<br/>
-        Valid: {{customForm.controls.date.valid}}<br/>
-
-        Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
     `
 })
 export class DatePickerFormExampleComponent {
     customForm = new FormGroup({
-        date: new FormControl(FdDate.getToday())
+        date: new FormControl(FdDate.getToday()),
+        disabledDate: new FormControl({ value: FdDate.getToday(), disabled: true })
     });
 }

docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html

@@ -60,7 +60,8 @@ <h2>Disabled State</h2>
 
 <separator></separator>
 
-<h2>Use in a Form</h2>
+<h2>Date Time Picker in Reactive Form</h2>
+<description>The date-time-picker component may also be used within Angular Reactive Forms.</description>
 <component-example [name]="'ex5'">
     <fd-datetime-form-example></fd-datetime-form-example>
 </component-example>

docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html

@@ -1,9 +1,17 @@
-<form [formGroup]="customForm">
-    <fd-datetime-picker formControlName="date"></fd-datetime-picker>
-</form>
-<br/>
-Touched: {{customForm.controls.date.touched}}<br/>
-Dirty: {{customForm.controls.date.dirty}}<br/>
-Valid: {{customForm.controls.date.valid}}<br/>
-
-Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toLocaleDateString() : 'null' }}
+<form [formGroup]="customForm" class="flex-form">
+    <div>
+    <fd-datetime-picker formControlName="date"></fd-datetime-picker><br/>
+        Touched: {{customForm.controls.date.touched}}<br/>
+        Dirty: {{customForm.controls.date.dirty}}<br/>
+        Valid: {{customForm.controls.date.valid}}<br/>
+        Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toLocaleDateString() : 'null' }}
+    </div>
+    <div>
+        <fd-datetime-picker formControlName="disabledDate"></fd-datetime-picker><br/>
+        Touched: {{customForm.controls.disabledDate.touched}}<br/>
+        Dirty: {{customForm.controls.disabledDate.dirty}}<br/>
+        Valid: {{customForm.controls.disabledDate.valid}}<br/>
+        Disabled: {{customForm.controls.disabledDate.disabled}}<br/>
+        Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.disabledDate.value.toLocaleDateString() : 'null' }}
+    </div>
+</form>

docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts

@@ -4,10 +4,17 @@ import { FdDatetime } from '../../../../../../../library/src/lib/datetime-picker
 
 @Component({
     selector: 'fd-datetime-form-example',
+    styles: [`
+        .flex-form{
+            display:flex;
+            justify-content: space-between;
+        }
+    `],
     templateUrl: './datetime-form-example.component.html'
 })
 export class DatetimeFormExampleComponent {
     customForm = new FormGroup({
-        date: new FormControl(FdDatetime.getToday())
+        date: new FormControl(FdDatetime.getToday()),
+        disabledDate: new FormControl({ value: FdDatetime.getToday(), disabled: true })
     });
 }