Input field not updated in Reactive Forms Angular 4

Question

I'm using reactive forms in an Angular application. I have 2 fields, one is a select (named client) and the other one an input (named clientCode) which has to be updated the user selects a new client.

<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 }}">

I'm using valueChanges over client, so that when the user selects a client I get the code associated to that client and it returns it as an Observable (clientCode$) which then updates the input value.

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

This is working in my screen, as the clientCode is displayed, but the form itself is not updated. Only when I click in the input field and type something is updated.

Is there any way to fix this?

Thanks

Answer 1

In order to update control model successfully you can use ngModel property instead of value .

It might look like:

[ngModel]="clientCode$ | async"

Plunker Example