在Reactive Forms中未更新的輸入字段Angular 4

我在Angular應用程序中使用反應形式。我有2個字段，一個是select（命名客戶端），另一個是必須更新的輸入（名爲clientCode），用戶選擇一個新的客戶端。在Reactive Forms中未更新的輸入字段Angular 4

<select formControlName="client"> 
      <option value="">Client</option> 
      <option *ngFor="let item of data.clients" [value]="item.value">{{ item.value }}</option> 
      </select> 
      <input type="text" formControlName="clientCode" placeholder="Client Code" value="{{ clientCode$ | async }}">

我使用過valueChanges客戶端，這樣，當用戶選擇一個客戶，我得到關聯到該客戶端的代碼，它返回它作爲一個可觀察（clientCode $），然後更新輸入值。

this.clientCode$ = this.summary 
     .get('client') 
     .valueChanges.map(val => this.clientsMap.get(val));

這是在我的屏幕上工作，因爲客戶端代碼顯示，但窗體本身沒有更新。只有當我點擊輸入字段並輸入內容時纔會更新。

有什麼辦法解決這個問題嗎？

感謝

來源

2017-06-17 David

移動'{{clientCode $}}'從'值='裏面裏面輸入標籤可能會有所幫助：' {{clientCode $ }}'。另外，關閉你的輸入字段可能會解決它：''或'' –

爲了更新控制模型成功，您可以使用ngModel屬性而不是value。

它可能看起來像：

[ngModel]="clientCode$ | async"

Plunker Example

來源

2017-06-17 13:51:40 yurzui

@ r0b3rt0這很好，你閱讀文檔，但請不要寫這樣的評論，如果你不知道它是如何作品。在我的plunker例子中，我甚至沒有導入FormsModule。 ngModel僅僅是被動的FormControlName的'@ Input' – yurzui

在Reactive Forms中未更新的輸入字段Angular 4

回答

相關問題