Update search control component and tests ng2-forms 2.0.0

Refs #737

ng2-components/ng2-alfresco-search/index.ts

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
 import { CoreModule } from 'ng2-alfresco-core';
 
 import { AlfrescoSearchService } from './src/services/alfresco-search.service';
@@ -44,7 +45,9 @@ export const ALFRESCO_SEARCH_PROVIDERS: [any] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        FormsModule,
+        ReactiveFormsModule
     ],
     declarations: [
         ...ALFRESCO_SEARCH_DIRECTIVES

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html

@@ -1,4 +1,4 @@
-<form (submit)="onSearch($event)">
+<form #f="ngForm" (ngSubmit)="onSearch(f.value)">
     <div [class]="getTextFieldClassName()">
         <label *ngIf="expandable" class="mdl-button mdl-js-button mdl-button--icon" for="searchControl">
             <i mdl-upgrade class="material-icons">search</i>
@@ -11,9 +11,8 @@
                    data-automation-id="search_input"
                    #searchInput
                    id="searchControl"
-                   ngControl="searchControl"
+                   [formControl]="searchControl"
                    [(ngModel)]="searchTerm"
-                   name="searchControl"
                    (focus)="onFocus($event)"
                    (blur)="onBlur($event)"
                    aria-labelledby="searchLabel">

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { AlfrescoSearchControlComponent } from './alfresco-search-control.component';
 import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
@@ -77,17 +76,17 @@ describe('AlfrescoSearchControlComponent', () => {
         });
         alfrescoSearchControlComponentFixture.detectChanges();
         alfrescoSearchControlComponentFixture.componentInstance.searchTerm = 'customSearchTerm';
-        alfrescoSearchControlComponentFixture.componentInstance
-            .ngOnChanges({'searchTerm': new SimpleChange('', 'customSearchTerm')});
+        alfrescoSearchControlComponentFixture.detectChanges();
     });
 
     it('should emit searchChange when search term changed by user', (done) => {
+        alfrescoSearchControlComponentFixture.detectChanges();
         alfrescoSearchControlComponentFixture.componentInstance.searchChange.subscribe(e => {
             expect(e.value).toBe('customSearchTerm211');
             done();
         });
-        alfrescoSearchControlComponentFixture.detectChanges();
         component.searchControl.setValue('customSearchTerm211', true);
+        alfrescoSearchControlComponentFixture.detectChanges();
     });
 
     describe('Component rendering', () => {

ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { FormControl, Validators } from '@angular/forms';
-import { Component, Input, Output, OnInit, OnChanges, SimpleChanges, ElementRef, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, OnInit, ElementRef, EventEmitter, ViewChild } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { SearchTermValidator } from './../forms/search-term-validator';
 
@@ -28,7 +28,7 @@ declare let __moduleName: string;
     templateUrl: './alfresco-search-control.component.html',
     styleUrls: ['./alfresco-search-control.component.css']
 })
-export class AlfrescoSearchControlComponent implements OnInit, OnChanges {
+export class AlfrescoSearchControlComponent implements OnInit {
 
     @Input()
     searchTerm = '';
@@ -74,23 +74,18 @@ export class AlfrescoSearchControlComponent implements OnInit, OnChanges {
     }
 
     ngOnInit(): void {
-        this.searchControl.valueChanges.map(value => this.searchControl.valid ? value : '')
-            .debounceTime(400).distinctUntilChanged().subscribe((value: string) => {
+        this.searchControl.valueChanges.debounceTime(400).distinctUntilChanged()
+            .subscribe((value: string) => {
                 this.onSearchTermChange(value);
             }
         );
-
         this.translate.addTranslationFolder('node_modules/ng2-alfresco-search/dist/src');
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes.hasOwnProperty('searchTerm')) {
-            this.searchControl.setValue(changes['searchTerm'].currentValue, true);
-        }
-    }
-
     private onSearchTermChange(value: string): void {
+        this.searchActive = true;
         this.autocompleteSearchTerm = value;
+        this.searchControl.setValue(value, true);
         this.searchValid = this.searchControl.valid;
         this.searchChange.emit({
             value: value,
@@ -116,6 +111,7 @@ export class AlfrescoSearchControlComponent implements OnInit, OnChanges {
      * @param event Submit event that was fired
      */
     onSearch(event): void {
+        this.searchControl.setValue(this.searchTerm, true);
         if (this.searchControl.valid) {
             this.searchSubmit.emit({
                 value: this.searchTerm