#1179 improve input group reactive form examples

docs/app/documentation/component-docs/input-group/examples/input-group-form-example.component.html

@@ -1,7 +1,16 @@
 <form [formGroup]="customForm">
-    <label fd-form-label>Search Input</label>
-    <fd-input-group-search [placeholder]="'Search'" formControlName="searchQuery"></fd-input-group-search>
+    <div fd-form-set class="flex-form-set">
+        <div fd-form-item>
+            <label fd-form-label>Search Input</label>
+            <fd-input-group-search [placeholder]="'Search'" formControlName="searchQuery"></fd-input-group-search>
+            Search Query Entered: {{ customForm.controls.searchQuery.value }}
+        </div>
+        <div fd-form-item>
+            <label fd-form-label>Quantity Spinner</label>
+            <fd-input-group-number  formControlName="number"></fd-input-group-number>
+            Number Entered: {{ customForm.controls?.number?.value }}
+        </div>
+    </div>
 </form>
 <br />
 
-Search Query Entered: {{ customForm.controls.searchQuery.value }}

docs/app/documentation/component-docs/input-group/examples/input-group-form-example.component.ts

@@ -3,10 +3,17 @@ import { FormGroup, FormControl } from '@angular/forms';
 
 @Component({
     selector: 'fd-input-group-form-example',
-    templateUrl: './input-group-form-example.component.html'
+    templateUrl: './input-group-form-example.component.html',
+    styles: [`
+        .flex-form-set{
+            display: flex;
+            justify-content: space-between;
+        }
+    `]
 })
 export class InputGroupFormExampleComponent {
     customForm = new FormGroup({
-        searchQuery: new FormControl('')
+        searchQuery: new FormControl({ value: 'abc', disabled: true }),
+        number: new FormControl({ value: '123', disabled: true })
     });
 };

docs/app/documentation/component-docs/input-group/input-group-docs.component.html

@@ -64,7 +64,7 @@ <h2>Input Group Search</h2>
 
 <separator></separator>
 
-<h2>Input Group Search Component Within Angular Reactive Forms</h2>
+<h2>Input Group Search and Number Component Within Angular Reactive Forms</h2>
 <description>It is possible to use the input-group-search component within an Angular Reactive Form.</description>
 <component-example [name]="'ex7'">
     <fd-input-group-form-example></fd-input-group-form-example>
@@ -73,15 +73,6 @@ <h2>Input Group Search Component Within Angular Reactive Forms</h2>
 
 <separator></separator>
 
-<h2>Input Group Number Component Within Angular Reactive Form</h2>
-<description>It is possible to use the input-group-number component within an Angular Reactive Form.</description>
-<component-example [name]="'ex8'">
-    <fd-input-group-number-form-example></fd-input-group-number-form-example>
-</component-example>
-<code-example [exampleFiles]="formNumberInput"></code-example>
-
-<separator></separator>
-
 <playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
 
     <fd-input-group [addOnText]="data.properties.addOnText" [placeholder]="data.properties.placeholder"

docs/app/documentation/component-docs/input-group/input-group-docs.component.ts

@@ -10,8 +10,6 @@ import * as inputGroupTextSrc from '!raw-loader!./examples/input-group-text-exam
 import * as inputGroupTextCompactSrc from '!raw-loader!./examples/input-group-text-compact-example.component.html';
 import * as formInputTsSrc from '!raw-loader!./examples/input-group-form-example.component.ts';
 import * as formInputHtmlSrc from '!raw-loader!./examples/input-group-form-example.component.html';
-import * as formInputNumberTsSrc from '!raw-loader!./examples/input-group-number-form-example.component.ts'
-import * as formInputNumberHtmlSrc from '!raw-loader!./examples/input-group-number-form-example.component.html'
 import { ExampleFile } from '../../core-helpers/code-example/example-file';
 
 @Component({
@@ -742,17 +740,6 @@ export class InputGroupDocsComponent {
         }
     ];
 
-    formNumberInput: ExampleFile[] = [
-        {
-            language: 'html',
-            code: formInputNumberHtmlSrc
-        },
-        {
-            language: 'typescript',
-            code: formInputNumberTsSrc
-        }
-    ];
-
     constructor(private schemaFactory: SchemaFactoryService) {
         this.schema = this.schemaFactory.getComponent('inputGroup');
     }

docs/app/documentation/documentation.module.ts

@@ -370,7 +370,6 @@ import { ComboboxHeightExampleComponent } from './component-docs/combobox/exampl
 import { ComboboxDisabledExampleComponent } from './component-docs/combobox/examples/combobox-disabled-example.component';
 import { CalendarProgrammaticallyChangeExampleComponent } from './component-docs/calendar/examples/calendar-programmatically-change-example.component';
 import { SelectViewValueExampleComponent } from './component-docs/select/examples/select-view-value-example/select-view-value-example.component';
-import { InputGroupNumberFormExampleComponent } from './component-docs/input-group/examples/input-group-number-form-example.component';
 
 import { InputFormGroupExampleComponent } from './component-docs/input/examples/input-form-group-example.component';
 import {
@@ -736,8 +735,7 @@ import { SelectMaxHeightExampleComponent } from './component-docs/select/example
         SelectAddingExampleComponent,
         SelectFormsComponent,
         SelectViewValueExampleComponent,
-        SelectMaxHeightExampleComponent,
-        InputGroupNumberFormExampleComponent
+        SelectMaxHeightExampleComponent
     ],
     entryComponents: [ModalContentComponent, ModalInModalComponent, ModalInModalSecondComponent, AlertContentComponent],
     imports: [