Question

我在Angular应用程序中使用反应形式。我有2个字段，一个是select（命名客户端），另一个是输入（名为clientCode），必须更新用户选择新客户端。

<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，因此当用户选择客户端时，我获得与该客户端关联的代码，并将其作为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

Reactive Forms Angular 4中未更新输入字段

1 个答案: