docs(typehead): add demo for using with forms valor-software#3748

Add demo for using with template-driven forms Close valor-software#3748
IraErshova · Feb 22, 2018 · ef35107 · ef35107
1 parent 112d694
commit ef35107
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 17 deletions.
diff --git a/demo/src/app/components/+typeahead/demos/form/form.html b/demo/src/app/components/+typeahead/demos/form/form.html
@@ -0,0 +1,14 @@
+<pre>Model: {{model | json}}</pre>
+
+<form>
+  <div class="form-group">
+    <label for="address">Address</label>
+    <input type="text" class="form-control" id="address" required
+           [(ngModel)]="model.address" name="address">
+  </div>
+  <div class="form-group">
+    <label for="state">State</label>
+    <input id="state" class="form-control" name="state"
+           [(ngModel)]="model.state" [typeahead]="states">
+  </div>
+</form>
diff --git a/demo/src/app/components/+typeahead/demos/form/form.ts b/demo/src/app/components/+typeahead/demos/form/form.ts
@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-form',
+  templateUrl: './form.html'
+})
+export class DemoTypeaheadFormComponent {
+  model = {
+    address: '312 Sundown Lane',
+    state: null
+  };
+  states = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+}
diff --git a/demo/src/app/components/+typeahead/demos/index.ts b/demo/src/app/components/+typeahead/demos/index.ts
@@ -2,26 +2,28 @@ import { DemoTypeaheadStaticComponent } from './static/static';
 import { DemoTypeaheadItemTemplateComponent } from './item-template/item-template';
 import { DemoTypeaheadFieldComponent } from './field/field';
 import { DemoTypeaheadAsyncComponent } from './async/async';
-import { DemoTypeaheadFormsComponent } from './in-form/in-form';
+import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-form';
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
 import { DemoTypeaheadContainerComponent } from './container/container';
 import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
 import { DemoTypeaheadPhraseDelimitersComponent } from './phrase-delimiters/phrase-delimiters';
+import { DemoTypeaheadFormComponent } from './form/form';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadStaticComponent,
   DemoTypeaheadItemTemplateComponent,
   DemoTypeaheadFieldComponent,
   DemoTypeaheadAsyncComponent,
-  DemoTypeaheadFormsComponent,
+  DemoTypeaheadReactiveFormComponent,
   DemoTypeaheadGroupingComponent,
   DemoTypeaheadSingleWorldComponent,
   DemoTypeaheadPhraseDelimitersComponent,
   DemoTypeaheadDropupComponent,
   DemoTypeaheadScrollableComponent,
-  DemoTypeaheadContainerComponent
+  DemoTypeaheadContainerComponent,
+  DemoTypeaheadFormComponent
 ];
 
 export const DEMOS = {
@@ -41,9 +43,13 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./async/async.ts'),
     html: require('!!raw-loader?lang=markup!./async/async.html')
   },
-  inForm: {
-    component: require('!!raw-loader?lang=typescript!./in-form/in-form.ts'),
-    html: require('!!raw-loader?lang=markup!./in-form/in-form.html')
+  form: {
+    component: require('!!raw-loader?lang=typescript!./form/form.ts'),
+    html: require('!!raw-loader?lang=markup!./form/form.html')
+  },
+  reactiveForm: {
+    component: require('!!raw-loader?lang=typescript!./reactive-form/reactive-form.ts'),
+    html: require('!!raw-loader?lang=markup!./reactive-form/reactive-form.html')
   },
   grouping: {
     component: require('!!raw-loader?lang=typescript!./grouping/grouping.ts'),

diff --git a/...nts/+typeahead/demos/in-form/in-form.html → ...ad/demos/reactive-form/reactive-form.html b/...nts/+typeahead/demos/in-form/in-form.html → ...ad/demos/reactive-form/reactive-form.html
@@ -1,5 +1,5 @@
-<!--Typeahead inside a form-->
 <pre class="card card-block card-header">Model: {{myForm.value.state | json}}</pre>
+
 <form [formGroup]="myForm">
   <input formControlName="state"
          [typeahead]="states"

diff --git a/...nents/+typeahead/demos/in-form/in-form.ts → ...head/demos/reactive-form/reactive-form.ts b/...nents/+typeahead/demos/in-form/in-form.ts → ...head/demos/reactive-form/reactive-form.ts
@@ -4,17 +4,17 @@ import { FormControl, FormGroup } from '@angular/forms';
 import 'rxjs/add/observable/of';
 
 @Component({
-  selector: 'demo-typeahead-forms',
-  templateUrl: './in-form.html'
+  selector: 'demo-typeahead-reactive-form',
+  templateUrl: './reactive-form.html'
 })
-export class DemoTypeaheadFormsComponent {
-  stateCtrl: FormControl = new FormControl();
+export class DemoTypeaheadReactiveFormComponent {
+  stateCtrl = new FormControl();
 
-  myForm: FormGroup = new FormGroup({
+  myForm = new FormGroup({
     state: this.stateCtrl
   });
 
-  states: string[] = [
+  states = [
     'Alabama',
     'Alaska',
     'Arizona',

diff --git a/demo/src/app/components/+typeahead/typeahead-section.list.ts b/demo/src/app/components/+typeahead/typeahead-section.list.ts
@@ -2,10 +2,11 @@ import { DemoTypeaheadStaticComponent } from './demos/static/static';
 import { DemoTypeaheadItemTemplateComponent } from './demos/item-template/item-template';
 import { DemoTypeaheadFieldComponent } from './demos/field/field';
 import { DemoTypeaheadAsyncComponent } from './demos/async/async';
-import { DemoTypeaheadFormsComponent } from './demos/in-form/in-form';
+import { DemoTypeaheadReactiveFormComponent } from './demos/reactive-form/reactive-form';
 import { DemoTypeaheadGroupingComponent } from './demos/grouping/grouping';
 import { DemoTypeaheadDropupComponent } from './demos/dropup/dropup';
 import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
+import { DemoTypeaheadFormComponent } from './demos/form/form';
 import { DemoTypeaheadContainerComponent } from './demos/container/container';
 import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';
 import { DemoTypeaheadPhraseDelimitersComponent } from './demos/phrase-delimiters/phrase-delimiters';
@@ -59,12 +60,27 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/async/async.html'),
         outlet: DemoTypeaheadAsyncComponent
       },
+      {
+        title: 'Template-driven forms',
+        anchor: 'forms',
+        description: `
+          <p>
+            Typeahead can be used in template-driven forms. Keep in mind that value of <code>ngModel</code> is string
+          </p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/form/form.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/form/form.html'),
+        outlet: DemoTypeaheadFormComponent
+      },
       {
         title: 'Reactive forms',
         anchor: 'reactive-forms',
-        component: require('!!raw-loader?lang=typescript!./demos/in-form/in-form.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/in-form/in-form.html'),
-        outlet: DemoTypeaheadFormsComponent
+        description: `
+          <p>Typeahead can be used in reactive forms</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/reactive-form/reactive-form.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/reactive-form/reactive-form.html'),
+        outlet: DemoTypeaheadReactiveFormComponent
       },
       {
         title: 'Grouping results',