角4オートコンプリートマテリアルコンポーネントTypeError：nullのプロパティ 'valueChanges'を読み取ることができません

Question

角度4のプロジェクトのいずれかでアンギュラマテリアルのオートコンプリートコンポーネントを正常に使用しました。

ERROR TypeError: Cannot read property 'valueChanges' of null at SiteAutoCompleteComponent.webpackJsonp.../../../../../src/app/site-auto-complete/site-auto-complete.component.ts.SiteAutoCompleteComponent.ServiceCallConf

私は私がすべての重要な変更なしに私の以前のコードをコピーしたため、コンポーネントまたは何か他のものをインポートするために欠けていると思う。しかし、私の新しいプロジェクトで、私はこのエラーを取得しています。

マイコード：

<md-input-container> 
    <input mdInput placeholder="Type Domain Name..." [mdAutocomplete]="auto" 
    class="form-control validate filter-input" formControlName="siteURL"> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" 
required md-input-minlength="2" md-input-maxlength="18" 
    md-select-on-match required md-input-minlength="2" [displayWith]="displayFn"> 
    <md-option *ngFor="let site of sites | async" [value]="site"> 
    {{ site.SiteURL }} 
    </md-option> 
</md-autocomplete> 

私は部品の多くを輸入しようとしましたが、まだエラーを取得。

import { Component, OnInit, Input, NgModule } from '@angular/core'; 
import { ReactiveFormsModule,FormControl, FormsModule } from '@angular/forms'; 
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { HttpModule, Http, Response } from '@angular/http'; 
import 'rxjs/Rx'; 
import {Observable} from 'rxjs'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/operator/catch'; 

編集：（app.moduleとコンポーネントの完全なコード）

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { FormsModule, ReactiveFormsModule,FormControl } from '@angular/forms'; 
import {MdInputModule,MdAutocompleteModule} from '@angular/material'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { MaterialModule } from '@angular/material'; 
import 'hammerjs'; 

import { AppComponent } from './app.component'; 
import { SiteAutoCompleteComponent } from './site-auto-complete/site-auto-complete.component'; 
import { SpWebApiService } from './sp-web-api.service'; 
import { ConfigService } from './utils/config.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    SiteAutoCompleteComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    ReactiveFormsModule, 
    BrowserAnimationsModule,MdInputModule,MdAutocompleteModule,MaterialModule 
    ], 
    providers: [SpWebApiService, ConfigService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

と私のコンポーネントのための：

import { Component, OnInit, Input, NgModule } from '@angular/core'; 
import { ReactiveFormsModule,FormControl, FormsModule } from '@angular/forms'; 
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { SpWebApiService } from '../sp-web-api.service'; 
import { Sites } from '../sites'; 
import { HttpModule, Http, Response } from '@angular/http'; 
import 'rxjs/Rx'; 
import {Observable} from 'rxjs'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/operator/catch'; 

@Component({ 
    selector: 'app-site-auto-complete', 
    templateUrl: './site-auto-complete.component.html', 
    styleUrls: ['./site-auto-complete.component.css'] 
}) 
export class SiteAutoCompleteComponent implements OnInit { 

    SearchForm: FormGroup; 

    private sites: Observable<Sites[]>; 
    private filteredSites: Observable<Sites[]>; 

    constructor(private spWebApiService: SpWebApiService, private fb: FormBuilder) { 
    this.createForm(); 

    this.ServiceCallConf(); 
    } 

    ServiceCallConf() 
    { 
    this.sites = this.SearchForm.get('siteURL').valueChanges 
    .debounceTime(400) 
    .distinctUntilChanged() 
    .do(_ => { 
     // if (this.SearchForm.get('siteURL').value.length > 0) 
     // this.loaderService.display(true); 
     // else 
     // return false; 
    })// .do(_ => this.loading = true) 
    .switchMap(searchTerm => this.filterSites(searchTerm)) //switchMap automatically unsubscribes from any previous observable when a new event comes down the stream. 
    .do(_ => 
     { 
     // this.loaderService.display(false);// this.loading = false; 
     console.log(this.sites); 
     // console.log(JSON.parse(JSON.stringify(this.Sites || null))); 
     }) 
    .catch(this.handleSiteServiceError); 
    } 
    private handleSiteServiceError(error: Response) { 
    // this.loaderService.display(false); 
    return Observable.throw('handleSiteServiceError'); 
    } 

    filterSites(val: string) { 
    console.log('filterSites starting...' + val); 

    if(val=='') 
     return; 

    this.filteredSites = this.spWebApiService.getSitesByName(val); 
    return this.filteredSites; 
    } 

    selectedSite:Sites; 
    displayFn(site: Sites): string { 
    this.selectedSite = site; 
    console.log(this.selectedSite); 
    return site ? site.SiteURL : ""; 
    } 

    createForm() { 
    this.SearchForm = this.fb.group({ 
     country: ['', Validators.required] 
    }); 
    } 

    ngOnInit() { 

    } 
} 

Answer 1

感謝コメント、それは多くの助けとなりました。 正しい入力名を宣言するように修正しました。 問題は、あなたがあなたの `component.ts`、` app.module.ts`および使用しているmaterial2のバージョンを提供することができます行方不明（間違った）入力名

createForm() { 
    this.searchForm = this.fb.group({ 
     siteURL: ['', Validators.required] 
    }); 
    }