Angular 2+ Reactive Formで独立したngModelを使用する

Question

私のページに反応的なフォームがあります。ここで

は、コードの概要です：それはトリッキー取得する場所ここで

<div class="container"> 
<form [formGroup]="transactionForm" (ngSubmit)="onSubmit(transactionForm)"> 
    <div formGroupName="userInfoGroup" class="form-group"> 
      <input formControlName="name" class="form-control" placeholder="Larry" id="name"> 
    </div> 
    ... 
</form> 
</div> 

です。私は、ユーザーがそれらを参照した人の情報を入力することができるようにしたい（私たちのデータベースに存在していてもいなくてもよい）。ですので、ng-bootstrap typeaheadを使用して、の既存のユーザーの検索を検索します。

だから私は、NG-ブートストラップからhtmlとtsコードをコピーして、私は今、これを実行すると、今の私のテンプレートが

<div class="container"> 
<form [formGroup]="transactionForm" (ngSubmit)="onSubmit(transactionForm)"> 
    <div formGroupName="userInfoGroup" class="form-group"> 
      <input formControlName="name" class="form-control" placeholder="Larry" id="name"> 
    </div> 
    <input id="typeahead-http" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="searchForReferrer" placeholder="Search for Referrer" /> 
    ... 
</form> 
</div> 

のように見える私はエラーを取得：

RegisterTransaction.html:154 ERROR TypeError: Cannot read property 'lift' of undefined 
    at tapOperatorFunction (tap.js:52) 
    at _do (do.js:48) 
    at NgbTypeahead.webpackJsonp.../../../../@ng-bootstrap/ng-bootstrap/typeahead/typeahead.js.NgbTypeahead.ngOnInit (typeahead.js:73) 
    at checkAndUpdateDirectiveInline (core.es5.js:10843) 
    at checkAndUpdateNodeInline (core.es5.js:12341) 
    at checkAndUpdateNode (core.es5.js:12284) 
    at debugCheckAndUpdateNode (core.es5.js:13141) 
    at debugCheckDirectivesFn (core.es5.js:13082) 
    at Object.View_RegisterTransaction_0._co [as updateDirectives] (RegisterTransaction.html:163) 
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067) 
    [1]: https://ng-bootstrap.github.io/#/components/typeahead/examples 

とちょうど私の場合削除する[ngbTypeahead]="searchForReferrer"

RegisterTransaction.html:154 ERROR Error: 
     ngModel cannot be used to register form controls with a parent formGroup directive. Try using 
     formGroup's partner directive "formControlName" instead. Example: 


    <div [formGroup]="myGroup"> 
     <input formControlName="firstName"> 
    </div> 

    In your class: 

    this.myGroup = new FormGroup({ 
     firstName: new FormControl() 
    }); 

     Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: 

     Example: 


    <div [formGroup]="myGroup"> 
     <input formControlName="firstName"> 
     <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}"> 
    </div> 


    at Function.webpackJsonp.../../../forms/@angular/forms.es5.js.TemplateDrivenErrors.modelParentException (forms.es5.js:4110) 
    at NgModel.webpackJsonp.../../../forms/@angular/forms.es5.js.NgModel._checkParentType (forms.es5.js:4430) 
    at NgModel.webpackJsonp.../../../forms/@angular/forms.es5.js.NgModel._checkForErrors (forms.es5.js:4417) 
    at NgModel.webpackJsonp.../../../forms/@angular/forms.es5.js.NgModel.ngOnChanges (forms.es5.js:4324) 
    at checkAndUpdateDirectiveInline (core.es5.js:10840) 
    at checkAndUpdateNodeInline (core.es5.js:12341) 
    at checkAndUpdateNode (core.es5.js:12284) 
    at debugCheckAndUpdateNode (core.es5.js:13141) 
    at debugCheckDirectivesFn (core.es5.js:13082) 
    at Object.View_RegisterTransaction_0._co [as updateDirectives] (RegisterTransaction.html:163) 

この検索を既存の反応形式内で適切に使用するにはどうすればよいですか？私のコードを確保するために私を突い@Aluanハダッドに

Answer 1

おかげで、私は最終的にそれが実際にない同じであったが実現、正確サンプルコードと同じました。私は間違って矢の機能の部分の周りに中かっこを追加しました。

ので、代わりの

search = (text$: Observable<string>) => 
    text$ 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .do(() => this.searching = true) 
     .switchMap(term => 
     this._service.search(term) 
      .do(() => this.searchFailed = false) 
      .catch(() => { 
      this.searchFailed = true; 
      return Observable.of([]); 
      })) 
     .do(() => this.searching = false) 
     .merge(this.hideSearchingWhenUnsubscribed); 

私は解決策が唯一のエラーメッセージに指定され

search = (text$: Observable<string>) => { 
    text$ 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .do(() => this.searching = true) 
     .switchMap(term => 
     this._service.search(term) 
      .do(() => this.searchFailed = false) 
      .catch(() => { 
      this.searchFailed = true; 
      return Observable.of([]); 
      })) 
     .do(() => this.searching = false) 
     .merge(this.hideSearchingWhenUnsubscribed); 
} 

Answer 2

を持っていました。フォームグループ内でngModelを使用することはできません。 ngModelを使用する場合は、その要素のスタンドアロンを指定する必要があります。その要素に[ngModelOptions] = "{standalone：true}"を渡します。その要素を次のように記述するだけです。

<input id="typeahead-http" type="text" class="form-control" [(ngModel)]="model" [ngModelOptions]="{standalone: true}" [ngbTypeahead]="searchForReferrer" placeholder="Search for Referrer" /> 

これで問題が解決するはずです。