fix(typeahead): Added form support

components/typeahead/typeahead.directive.ts

@@ -2,7 +2,7 @@ import {
   Directive, Input, Output, HostListener, EventEmitter, OnInit, ElementRef,
   Renderer, DynamicComponentLoader, ComponentRef, ReflectiveInjector, provide, ViewContainerRef
 } from '@angular/core';
-import {NgModel} from '@angular/forms';
+import {NgControl} from '@angular/forms';
 import {TypeaheadUtils} from './typeahead-utils';
 import {TypeaheadContainerComponent} from './typeahead-container.component';
 import {TypeaheadOptions} from './typeahead-options.class';
@@ -21,13 +21,10 @@ import {global} from '@angular/core/src/facade/lang';
 const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
 /* tslint:enable */
 
-// https://github.com/angular/angular/blob/master/modules/@angular/src/core/forms/directives/shared.ts
-function setProperty(renderer:Renderer, elementRef:ElementRef, propName:string, propValue:any):void {
-  renderer.setElementProperty(elementRef.nativeElement, propName, propValue);
-}
-
 @Directive({
-  selector: '[typeahead][ngModel]'
+  /* tslint:disable */
+  selector: '[typeahead][ngModel],[typeahead][formControlName]'
+  /* tslint:enable */
 })
 export class TypeaheadDirective implements OnInit {
   @Output() public typeaheadLoading:EventEmitter<boolean> = new EventEmitter<boolean>(false);
@@ -62,7 +59,7 @@ export class TypeaheadDirective implements OnInit {
   private placement:string = 'bottom-left';
   private popup:Promise<ComponentRef<any>>;
 
-  private cd:NgModel;
+  private control:NgControl;
   private viewContainerRef:ViewContainerRef;
   private element:ElementRef;
   private renderer:Renderer;
@@ -142,10 +139,10 @@ export class TypeaheadDirective implements OnInit {
     }
   }
 
-  public constructor(cd:NgModel, viewContainerRef:ViewContainerRef, element:ElementRef,
+  public constructor(control:NgControl, viewContainerRef:ViewContainerRef, element:ElementRef,
                      renderer:Renderer, loader:DynamicComponentLoader) {
     this.element = element;
-    this.cd = cd;
+    this.control = control;
     this.viewContainerRef = viewContainerRef;
     this.renderer = renderer;
     this.loader = loader;
@@ -176,8 +173,7 @@ export class TypeaheadDirective implements OnInit {
     let valueStr:string = ((typeof value === 'object' && this.typeaheadOptionField)
       ? value[this.typeaheadOptionField]
       : value).toString();
-    this.cd.viewToModelUpdate(valueStr);
-    setProperty(this.renderer, this.element, 'value', valueStr);
+    this.control.control.updateValue(valueStr);
     this.hide();
   }
 
@@ -204,8 +200,8 @@ export class TypeaheadDirective implements OnInit {
         this.container.parent = this;
         // This improves the speedas it won't have to be done for each list item
         let normalizedQuery = (this.typeaheadLatinize
-          ? TypeaheadUtils.latinize(this.cd.model)
-          : this.cd.model).toString()
+          ? TypeaheadUtils.latinize(this.control.control.value)
+          : this.control.control.value).toString()
           .toLowerCase();
         this.container.query = this.typeaheadSingleWords
           ? TypeaheadUtils.tokenize(normalizedQuery, this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters)
@@ -325,8 +321,8 @@ export class TypeaheadDirective implements OnInit {
     if (this.container && this._matches.length > 0) {
       // This improves the speedas it won't have to be done for each list item
       let normalizedQuery = (this.typeaheadLatinize
-        ? TypeaheadUtils.latinize(this.cd.model)
-        : this.cd.model).toString()
+        ? TypeaheadUtils.latinize(this.control.control.value)
+        : this.control.control.value).toString()
         .toLowerCase();
       this.container.query = this.typeaheadSingleWords
         ? TypeaheadUtils.tokenize(normalizedQuery, this.typeaheadWordDelimiters, this.typeaheadPhraseDelimiters)

demo/components/typeahead/typeahead-demo.html

@@ -23,4 +23,17 @@ <h4>Asynchronous results</h4>
     <div *ngIf="typeaheadNoResults===true" class="" style="">
         <i class="glyphicon glyphicon-remove"></i> No Results Found
     </div>
+    <h4>Typeahead inside a form</h4>
+    <pre class="card card-block card-header">Model: {{myForm.value.state | json}}</pre>
+    <form [formGroup]="myForm">
+      <input formControlName="state"
+             [typeahead]="states"
+             (typeaheadOnSelect)="typeaheadOnSelect($event)"
+             [typeaheadOptionsLimit]="7"
+             [typeaheadOptionField]="'name'"
+             placeholder="Typeahead inside a form"
+             class="form-control">
+    </form>
+
+
 </div>

demo/components/typeahead/typeahead-demo.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
-import {FORM_DIRECTIVES} from '@angular/forms';
+import {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 
 import {TYPEAHEAD_DIRECTIVES} from '../../../ng2-bootstrap';
@@ -10,10 +10,16 @@ let template = require('./typeahead-demo.html');
 
 @Component({
   selector: 'typeahead-demo',
-  directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
+  directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
   template: template
 })
 export class TypeaheadDemoComponent {
+  public stateCtrl:FormControl = new FormControl();
+
+  public myForm:FormGroup= new FormGroup({
+    state: this.stateCtrl
+  });
+
   public selected:string = '';
   public dataSource:Observable<any>;
   public asyncSelected:string = '';