2017-12-13 19 views
0

角度応答型を使用していて、ng-bootstrap先読みによって先読みフィールドを使用しています。私は状態のリストは以下のようにインターフェイスを使用して作成したのです -モデル駆動型(反応性)のngtypeaheadに値を設定する

export interface IContactStates { 
    Id: number; 
    Name: string; 
} 

状態のリストは、サービスや先行入力を経由して移入されてcomponent.tsに初期化されます -

search = (text$: Observable<string>) => 
    text$ 
    .debounceTime(200) 
    .distinctUntilChanged() 
    .map(term => term === '' ? [] 
     : this.statesList.filter(v => 
v.Name.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10)) 

formatter = (x: {Name: string}) => x.Name; 

とngbTypaheadは以下のように定義されますHTMLテンプレートに - 私は新しいフォームを作成していたときに私はどんなすでに送信されたフォームを編集しようとしていたときにこれが正常に動作します

<ng-template #rt let-r="result" let-t="term"> 
     {{ r.Name}} 
     </ng-template> 
    <div class="col-md-6"> 
     <div class="form-group input-group-sm" 
      [ngClass]="{'has-error': displayMessage.State}"> 
      <label for="State">State</label> 
      <input class="form-control form-control-sm" formControlName="State" 
      type="text" [ngbTypeahead]="search" 
      [resultTemplate]="rt" 
      [resultFormatter]="formatter" 
      [inputFormatter]="formatter"    
      [editable]="false" 
      placeholder="State (start typing the name and then select from list)" 
      (selectItem)="selectItem($event)"> 
      <span class="help-block" *ngIf="displayMessage.State"> 
       {{displayMessage.State}} 
      </span> 
     </div> 
    </div> 

、ステート制御値は未定義に設定されます。私はng-bootstrapヘルプ文書から先読み値を設定することにヒントを得ようとしましたが、運はありませんでした。

答えて

0

私はそれを働かせる。フォームコントロール要素を再初期化するだけです。

関連する問題