Using ngModelChange to update array of input fields

Question

I'm trying to use ngModelChange to update the underlying data for an array of input fields, as shown in this stackblitz

However, when the ngModelChange function is triggered, updating the underlying data model prevents further data entry (e.g. try typing 123 in any field, and you will see only the first digit is accepted until you click the field again).

This kind of scenario (ngFor bound to array of fields) works easily with angular 2 way data binding, however, I need it to work with one-way-binding + ngModelChange so that I can do other things besides just updating the underlying data (e.g. as shown in the stackblitz, I trigger unsavedChanges flag to display a warning in the UI).

Any ideas how to make this work?

Note: I already explored S.O. for articles on ngModelChange / debounceTime e.g. ngModelChange / debounceTime

Based on those articles, I can see how using a Subject to push (debounced) changes in the ngModelChange function could work easily for single / static fields. However, in my scenario I have a dynamic array collection, and am not sure if I need to go down the route of an array of Subjects or a single Subject which contains an Array, or else if there's a more trivial solution to this whole problem (e.g. use 2 way binding but trigger another function somehow).

Any help greatly appreciated!

S. Arora

sarora · Accepted Answer · 2019-12-06 18:35:33Z

1

After further experimentation I found that debouncing changes to the data model still didn't solve the data entry issue, and that the real issue was the input field was losing focus after each change.

Apparently it's a known issue that you need to use a trackBy function when using an array of primitives, as detailed here

answered Dec 6, 2019 at 18:35

sarora

9149 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Using ngModelChange to update array of input fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related