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 13, 2018 · 318db96 · 318db96
1 parent 465ed0d
commit 318db96
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 16 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: string[] = [
+    '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,20 +2,22 @@ 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 { DemoTypeaheadFormComponent } from './form/form';
 
 export const DEMO_COMPONENTS = [
   DemoTypeaheadStaticComponent,
   DemoTypeaheadItemTemplateComponent,
   DemoTypeaheadFieldComponent,
   DemoTypeaheadAsyncComponent,
-  DemoTypeaheadFormsComponent,
+  DemoTypeaheadReactiveFormComponent,
   DemoTypeaheadGroupingComponent,
   DemoTypeaheadDropupComponent,
-  DemoTypeaheadScrollableComponent
+  DemoTypeaheadScrollableComponent,
+  DemoTypeaheadFormComponent
 ];
 
 export const DEMOS = {
@@ -35,9 +37,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,13 +4,13 @@ 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 {
+export class DemoTypeaheadReactiveFormComponent {
   stateCtrl: FormControl = new FormControl();
 
-  myForm: FormGroup = new FormGroup({
+  myForm = new FormGroup({
     state: this.stateCtrl
   });
 

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 { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -56,12 +57,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. Keep in mind that value of <code>ngModel</code> is string</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',

diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -776,7 +776,7 @@ export const ngdoc: any = {
   "BsDatepickerConfig": {
     "fileName": "src/datepicker/bs-datepicker.config.ts",
     "className": "BsDatepickerConfig",
-    "description": "<p>For date range picker there are <code>BsDaterangepickerConfig</code> which inherits all properties,\nexcept displayMonths, for range picker it default to <code>2</code></p>\n",
+    "description": "<p>For date range picker there are <code>BsDaterangepickerConfig</code> which inherits all properties,\nexcept <code>displayMonths</code>, for range picker it default to <code>2</code></p>\n",
     "methods": [],
     "properties": [
       {