#1179 improve time reactive form examples

SAP · Aug 31, 2019 · 617833a · 617833a
1 parent 3b36e66
commit 617833a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/docs/app/documentation/component-docs/time/examples/time-form-example.component.html b/docs/app/documentation/component-docs/time/examples/time-form-example.component.html
@@ -1,10 +1,17 @@
-<form [formGroup]="customForm">
-    <fd-time formControlName="time"></fd-time>
+<form [formGroup]="customForm" class="flex-form">
+    <div>
+        <label fd-form-label for="time-1">Select Time:</label><br>
+        <fd-time formControlName="time" id="time-1"></fd-time>
+        Enabled Time: <span *ngIf="customForm.controls.time.value">
+        {{ customForm.controls.time.value.hour }}h
+        {{ customForm.controls.time.value.minute }}m
+        {{ customForm.controls.time.value.second }}s
+</span>
+    </div>
+    <div>
+        <label fd-form-label for="time-2">Disabled Time:</label><br>
+        <fd-time formControlName="disabledTime" id="time-2"></fd-time>
+    </div>
 </form>
 <br />
 
-Selected Time: <span *ngIf="customForm.controls.time.value">
-    {{ customForm.controls.time.value.hour }}h
-    {{ customForm.controls.time.value.minute }}m
-    {{ customForm.controls.time.value.second }}s
-</span>
diff --git a/docs/app/documentation/component-docs/time/examples/time-form-example.component.ts b/docs/app/documentation/component-docs/time/examples/time-form-example.component.ts
@@ -3,10 +3,17 @@ import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'fd-time-form-example',
+    styles: [`
+        .flex-form{
+            display: flex;
+            justify-content: space-between;
+        }
+    `],
     templateUrl: './time-form-example.component.html'
 })
 export class TimeFormExampleComponent {
     customForm = new FormGroup({
-        time: new FormControl('')
+        time: new FormControl(''),
+        disabledTime: new FormControl({ value: '', disabled: true })
     });
 };
diff --git a/docs/app/documentation/component-docs/time/time-docs.component.html b/docs/app/documentation/component-docs/time/time-docs.component.html
@@ -75,7 +75,7 @@ <h2>Internationalization</h2>
 
 <separator></separator>
 
-<h2>Time in Form</h2>
+<h2>Time in Reactive Form</h2>
 <description>
     The time component may also be used within a form. The values within the form may then be accessed through the
     usual methods used for accessing data within Angular reactive forms.