响应式表单中的输入字段未更新 Angular 4

Question

我在 Angular 应用程序中使用响应式表单。我有 2 个字段，一个是 select（名为客户端），另一个是输入（名为 clientCode），必须更新用户 selects 一个新客户端。

<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，这样当用户 select 是一个客户端时，我会得到与该客户端关联的代码，并且它 returns 它作为一个 Observable (clientCode$) 然后更新输入值。

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

这在我的屏幕上有效，因为显示了 clientCode，但表单本身没有更新。只有当我在输入字段中单击并键入内容时才会更新。

有什么办法可以解决这个问题吗？

谢谢

Answer 1

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

它可能看起来像：

[ngModel]="clientCode$ | async"

Plunker Example

响应式表单中的输入字段未更新 Angular 4

Input field not updated in Reactive Forms Angular 4

angular

angular-reactive-forms