docs: Added form examples for form-input (#852)

* #677 Added example for using forms * lock experimentation * fixing package lock issue * #677 Updated description for form group input component documentation * #677 fixed minor formatting issue in documentation module
SAP · Jun 4, 2019 · 3d02a68 · 3d02a68
1 parent 4ca0b0d
commit 3d02a68
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 30 deletions.
diff --git a/docs/app/documentation/component-docs/form/examples/form-group-input-example.component.html b/docs/app/documentation/component-docs/form/examples/form-group-input-example.component.html
@@ -0,0 +1,16 @@
+<form [formGroup]="customForm">
+    <div fd-form-set>
+        <div fd-form-item>
+            <label fd-form-label for="input-1">Default Input:</label>
+            <input
+                formControlName="inputControl"
+                fd-form-control
+                type="text"
+                id="input-1"
+                placeholder="Field placeholder text"
+            />
+        </div>
+    </div>
+</form>
+
+Input Value: {{ customForm.controls.inputControl.value }}
diff --git a/docs/app/documentation/component-docs/form/examples/form-group-input-example.component.scss b/docs/app/documentation/component-docs/form/examples/form-group-input-example.component.scss
@@ -0,0 +1,3 @@
+input {
+    margin-bottom: 10px;
+}
diff --git a/docs/app/documentation/component-docs/form/examples/form-group-input-example.component.ts b/docs/app/documentation/component-docs/form/examples/form-group-input-example.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'fd-form-group-input',
+    templateUrl: './form-group-input-example.component.html',
+    styleUrls: ['form-group-input-example.component.scss']
+})
+export class FormGroupInputExampleComponent {
+    customForm = new FormGroup({
+        inputControl: new FormControl('', Validators.required)
+    });
+}
diff --git a/docs/app/documentation/component-docs/form/form-docs.component.html b/docs/app/documentation/component-docs/form/form-docs.component.html
@@ -17,26 +17,24 @@ <h2>Input States</h2>
 <description>
     The state of the input field can reflect validity of the data entered, whether the input data is editable or
     disabled.
-    <br>
+    <br />
     <b>Normal:</b> The field is editable but no validation has occurred.
-    <br>
+    <br />
     <b>Valid:</b> The data format entered has been validated and it’s correct, such as an email address.
-    <br>
+    <br />
     <b>Invalid:</b> The data entered is not valid and must be corrected.
-    <br>
+    <br />
     <b>Warning:</b> The data entered is formatted correctly but there are other issues are problematic but will not stop
-    the user
-    from moving forward.
-    <br>
+    the user from moving forward.
+    <br />
     <b>Disabled:</b> This indicates the field is not editable. A common use case is that this field is dependent on a
-    previous
-    entry or selection within the form.
-    <br>
+    previous entry or selection within the form.
+    <br />
     <b>Read Only:</b> Used to display static information in the context of a form.
-    <br>
-    <br> Along with Invalid and Warning, error messages should be displayed below the field so the user can correct the
-    error and
-    move forward.
+    <br />
+    <br />
+    Along with Invalid and Warning, error messages should be displayed below the field so the user can correct the error
+    and move forward.
 </description>
 <component-example [name]="'ex3'">
     <fd-form-state-example></fd-form-state-example>
@@ -46,7 +44,8 @@ <h2>Input States</h2>
 <separator></separator>
 <h2>Select</h2>
 <description>
-    The Select component is similar to a dropdown but is more commonly used within a form. It can also be set to a disabled state.
+    The Select component is similar to a dropdown but is more commonly used within a form. It can also be set to a
+    disabled state.
 </description>
 <component-example [name]="'ex4'">
     <fd-form-select-example></fd-form-select-example>
@@ -55,10 +54,9 @@ <h2>Select</h2>
 
 <separator></separator>
 <h2>Radio buttons</h2>
-<description>Radio buttons allow the user to see all options and select one. Generally, this is used when there are between 2-3
-    options.
-    This component can also be disabled and displayed in a row.
-    <br/><br/>
+<description
+    >Radio buttons allow the user to see all options and select one. Generally, this is used when there are between 2-3
+    options. This component can also be disabled and displayed in a row. <br /><br />
     Keyboard support for radio button selection is handled via the arrow keys.
 </description>
 <component-example [name]="'ex5'">
@@ -68,13 +66,24 @@ <h2>Radio buttons</h2>
 
 <separator></separator>
 <h2>Checkbox</h2>
-<description>With checkboxes, all options are visible and the user can make one or more selections. This component can be set
-    disabled
-    and also displayed in a row.
-    <br/><br/>
+<description
+    >With checkboxes, all options are visible and the user can make one or more selections. This component can be set
+    disabled and also displayed in a row. <br /><br />
     Checkboxes are keyboard navigable via the tab key and selected with the space bar.
 </description>
 <component-example [name]="'ex6'">
     <fd-form-checkbox-example></fd-form-checkbox-example>
 </component-example>
 <code-example [code]="checkboxFormHtml" [language]="'HTML'"></code-example>
+
+<separator></separator>
+<h2>Form Group Input</h2>
+<description>
+    The input element, like several other native html elements, support Angular reactive forms. Using the input within
+    the form element greatly simplifies input value access and validation.
+</description>
+<component-example [name]="'ex7'">
+    <fd-form-group-input></fd-form-group-input>
+</component-example>
+<code-example [code]="formGroupInputHtml" [language]="'HTML'"></code-example>
+<code-example [code]="formGroupInputTs" [language]="'typescript'"></code-example>
diff --git a/docs/app/documentation/component-docs/form/form-docs.component.ts b/docs/app/documentation/component-docs/form/form-docs.component.ts
@@ -6,6 +6,8 @@ import * as formInlineHelpHtml from '!raw-loader!./examples/form-inline-help-exa
 import * as formRadioHtml from '!raw-loader!./examples/form-radio-example.component.html';
 import * as formSelectHtml from '!raw-loader!./examples/form-select-example.component.html';
 import * as formStateHtml from '!raw-loader!./examples/form-state-example.component.html';
+import * as formGroupInputHtml from '!raw-loader!./examples/form-group-input-example.component.html';
+import * as formGroupInputTs from '!raw-loader!./examples/form-group-input-example.component.ts';
 
 @Component({
     selector: 'app-form',
@@ -23,4 +25,8 @@ export class FormDocsComponent {
     radioButtonsFormHtml = formRadioHtml;
 
     checkboxFormHtml = formCheckboxHtml;
+
+    formGroupInputHtml = formGroupInputHtml;
+
+    formGroupInputTs = formGroupInputTs;
 }
diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { RouterModule } from '@angular/router';
@@ -116,6 +116,7 @@ import {
     FormSelectExampleComponent,
     FormStateExampleComponent
 } from './component-docs/form/examples/form-examples.component';
+import { FormGroupInputExampleComponent } from './component-docs/form/examples/form-group-input-example.component';
 import { IconExampleComponent } from './component-docs/icon/examples/icon-example.component';
 import {
     CircleIdentifierExampleComponent,
@@ -144,7 +145,10 @@ import {
 } from './component-docs/list/examples/list-examples.component';
 import { LoadingSpinnerExampleComponent } from './component-docs/loading-spinner-docs/examples/loading-spinner-example.component';
 import { LoadingSpinnerContainerExampleComponent } from './component-docs/loading-spinner-docs/examples/loading-spinner-container-example.component';
-import { MenuExampleComponent, MenuGroupExampleComponent } from './component-docs/menu/examples/menu-examples.component';
+import {
+    MenuExampleComponent,
+    MenuGroupExampleComponent
+} from './component-docs/menu/examples/menu-examples.component';
 import { ModalOpenTemplateExampleComponent } from './component-docs/modal/examples/template-as-content/modal-open-template-example.component';
 import { ModalContentComponent } from './component-docs/modal/examples/component-as-content/modal-content.component';
 import { ModalComponentAsContentExampleComponent } from './component-docs/modal/examples/component-as-content/modal-component-as-content-example.component';
@@ -171,7 +175,10 @@ import {
     SideNavigationTitlesExampleComponent
 } from './component-docs/side-navigation/examples/side-navigation-examples.component';
 import { TableExampleComponent } from './component-docs/table/examples/table-example.component';
-import { TabsExampleComponent, TabSelectionExampleComponent } from './component-docs/tabs/examples/tabs-examples-component';
+import {
+    TabsExampleComponent,
+    TabSelectionExampleComponent
+} from './component-docs/tabs/examples/tabs-examples-component';
 import {
     TileActionsExampleComponent,
     TileDisabledExampleComponent,
@@ -194,7 +201,8 @@ import {
     TimePicker12ExampleComponent,
     TimePickerDisabledExampleComponent,
     TimePickerNoSecondsExampleComponent,
-    TimePickerCompactExampleComponent, TimePickerAllowNullExampleComponent
+    TimePickerCompactExampleComponent,
+    TimePickerAllowNullExampleComponent
 } from './component-docs/time-picker/examples/time-picker-examples.component';
 import { ToggleDocsComponent } from './component-docs/toggle/toggle-docs.component';
 import { ToggleSizesExampleComponent } from './component-docs/toggle/examples/toggle-sizes-example/toggle-sizes-example.component';
@@ -411,6 +419,7 @@ export function highlightJsFactory() {
         FormRadioExampleComponent,
         FormSelectExampleComponent,
         FormStateExampleComponent,
+        FormGroupInputExampleComponent,
         IconExampleComponent,
         CircleIdentifierExampleComponent,
         ColorsIdentifierExampleComponent,
@@ -573,6 +582,7 @@ export function highlightJsFactory() {
         MarkdownModule.forChild(),
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         RouterModule.forChild(ROUTES),
         SchemaModule.forRoot(COMPONENT_SCHEMAS),
         FundamentalNgxModule,
@@ -585,5 +595,4 @@ export function highlightJsFactory() {
         ApiDocsService
     ]
 })
-export class DocumentationModule {
-}
+export class DocumentationModule { }
diff --git a/package-lock.json b/package-lock.json