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) 

기존 반응 형 양식 내에서이 검색을 올바르게 사용하려면 어떻게해야합니까? 내 코드를 확인하기 위해 저를 prodded @Aluan 하다드에

Answer 1

덕분에, 나는 결국 참 하지 같은 깨달았다 정확히 샘플 코드와 동일한 이었다. 나는 실수로 화살표 함수의 return 부분 주위에 중괄호를 추가했습니다.

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

솔루션 만 오류 메시지에 나와 있었다. form-group 내에서는 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" /> 

이렇게하면 문제가 해결됩니다.