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

Moving {{ clientCode$ }} from value= to inside inside input tags might help: <input ... >{{ clientCode$ }}</input>. Also, closing your input field may fix it: <input ... / > or <input ...></input> — Z. Bagley
– Z. Bagley, Commented Jun 17, 2017 at 13:14

yurzui · Accepted Answer · 2017-06-17 13:51:40Z

3

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

It might look like:

[ngModel]="clientCode$ | async"

Plunker Example

answered Jun 17, 2017 at 13:51

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yurzui Over a year ago

@r0b3rt0 That's good that you read the documentation but please don't write such comments if you don't know how it works. In my plunker example i even didn't import FormsModule. ngModel is just @Input for reactive FormControlName

Collectives™ on Stack Overflow

Input field not updated in Reactive Forms Angular 4

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related