2017-03-16 56 views
0

我已經建立了一個可觀察到的是這樣的:Angular2:綁定可觀測量輸入表單字段

this.source$ = this.store$ 
    .select(state => state.source); 

模板:

<form> 
    <div class="form-group"> 
     <input type="email" id="input-to" placeholder="To" [ngModel]="(source$ | async).customer" name="sender" class="input-transparent form-control"> 
    </div> 
</form> 

正如你可以看到我試圖「綁定」 $sourceObservable ta表單輸入字段。

目前,我得到這個異常消息:

Uncaught (in promise): Error: Error in ./PaymentForm class PaymentForm - inline template:21:13 caused by: valUnwrapper.unwrap(...) is null

另一個問題。有人能告訴我如何將觀察者綁定到輸入字段嗎?我的意思是,我應該使用[ngModel]="(source$ | async)..."(ngModel)=...

回答

2

ngModel僅用於雙向綁定。其語法是[(ngModel)] 單程值從組件綁定使用[]爲HTML。 嘗試值:

<input type="email" id="input-to" placeholder="To" [value]="(source$ | async).customer" name="sender" class="input-transparent form-control"> 

()用於從視圖結合組件(例如事件)。 例

<input type="email" id="input-to" placeholder="To" (onChange)="func()" name="sender" class="input-transparent form-control"> 

您可以使用ngModel[ngModel]="data" (ngModelChange)="event()